在 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 吗？

该页面可以来回切换，所以我总是需要其中之一。另外，如果我不向 css 添加 !important ，那么覆盖层的高度将无限扩展（它在 facebook 中，所以我假设那里存在问题）

有什么建议吗？

Answer 1

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

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

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

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

Answer 2

不要将样式应用于类。将类作为样式应用到您的 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 文件或多个加载样式的问题时，才会真正使用 !important。

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

$('#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 3

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

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/

---

< strong>更新

对于 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

除非我误读了你的问题，否则你所做的确实可以在 jsfiddle 中工作。

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

Answer 6

我这样解决了这个问题：

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

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

Answer 7

请从类中删除 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");

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