在 jQuery 的 css() 函数中使用 !important

Question

我有一个对话框，上面声明如下：

     .ui-widget-overlay  {
         position: absolute;
         left: 8px;
         top: 9px;
         height: 985px !important;
         width: 518px !important; 
      }

我拥有的页面将有两个不同的页面高度。为了解决这个问题，我在我的 JS 文件中做了这个：

如果小的可见：

$('.ui-widget-overlay').css("height", "985px !important");

其他

$('.ui-widget-overlay').css("height", "1167px !important");

显然这不起作用。还有其他方法可以超越!important吗？

页面可以来回切换，因此我需要始终拥有其中一个。另外，如果我不将 !important 添加到 css 中，那么覆盖层的高度将无限扩大（它在 facebook 中，所以我假设那里有问题）

有什么建议吗？

Answer 1

我这样解决了这个问题：

inputObj.css('cssText', inputObj.attr('style')+'padding-left: ' + (width + 5) + 'px !IMPORTANT;');

所以不会丢失内联样式，最后一个会覆盖第一个

Answer 2

有一个技巧可以做到这一点。

$('.ui-widget-overlay').css('cssText', 'height:985px !important;');

$('.ui-widget-overlay').css('cssText', 'height:1167px !important;');

cssText 在这里起到了作用。它将css样式附加为字符串，而不是变量。

Answer 3

请从类中移除 height 属性，然后尝试实现您的 if 和 else 条件。

.ui-widget-overlay  {
         position: absolute;
         left: 8px;
         top: 9px;
         width: 518px !important; 
         }

if
     $('.ui-widget-overlay').attr("height", "985px");
else
     $('.ui-widget-overlay').attr("height", "1167px");

享受代码......保持微笑......

Answer 4

您可以使用覆盖所需属性的规则创建动态样式表并将其应用到页面上。

var $stylesheet = $('<style type="text/css" media="screen" />');

$stylesheet.html('.tall{height:1167px !important;} .short{height:985px !important}');

$('body').append($stylesheet);

现在，当您添加我们新创建的类时，它们将具有优先权，因为它们是最后定义的。

$('.ui-widget-overlay').addClass('tall');

演示地址 http://jsfiddle.net/gaby/qvRSs/

---

更新

对于 IE9 之前的支持使用

var $stylesheet = $('<style type="text/css" media="screen">\
                    .tall{height:300px !important;}\
                    .short{height:100px !important}\
                    </style>');

$('body').append($stylesheet);

演示地址 http://jsfiddle.net/gaby/qvRSs/3/

Answer 5

不要将样式应用于类。将类作为样式应用到您的 div！

让jQuery为你做所有的工作

样式表中应该包含这些类

.ui-widget-overlay  {
         position: absolute;
         left: 8px;
         top: 9px;
         width: 518px !important; 
         }

.ui-widget-small { height: 985px;  }

.ui-widget-full { height: 1167px; }

好的，这就是你的 CSS 排序

现在是你的 div

 <div id="myWidget" class="ui-widget-overlay ui-widget-small"> YOUR STUFF </div>

现在您可以使用 jQuery 来操作您的 div，方法是附加到按钮/单击/悬停任何您想要使用的东西

$('#myWidget').removeClass('ui-widget-small').addClass('ui-widget-full')

而且您不需要使用 !important - 当您开始遇到大型 CSS 文件或多个加载样式的问题时，它会真正使用。

这是即时的，但您也可以添加效果

$('#myWidget').hide('slow', function(){ $('#myWidget').removeClass('ui-widget-small').addClass('ui-widget-full').show('slow') }  )

您可以像这样动态地向您的页面添加样式 - 并且要将所有现有的类替换为另一个类，我们可以使用 .attr('class', 'newClass') 代替。

$('body').prepend('<style type="text/css"> .myDynamicWidget { height: 450px; } </style>')
$('#myWidget').attr('class', 'ui-widget-overlay')
$('#myWidget').addClass('myDynamicWidget')

但您不希望使用此方法过度编写现有样式。这应该在“丢失”的情况下使用。只是展示了jQuery的强大

Answer 6

除非我误读了您的问题，否则您在做什么does work in jsfiddle。

编辑：我的小提琴仅适用于某些浏览器（到目前为止，Chrome：通过，IE8：失败）。

Answer 7

您可以尝试使用$(this).attr('style', 'height:1167px !important'); 我还没有测试过，但它应该可以工作。