在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

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

$('.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文件或多个加载样式的问题时,这是真正使用的.

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

$('#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');我没有测试它,但它应该工作.