在jQuery的css（）函数中使用！important [英] Using !important in jQuery's css() function

问题描述

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

I have a dialog with an overlay declared like so:

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

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

The page I have will have two different page heights. To account for this with the overlay I have done this in my JS file:

如果小的可见：

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

else

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

显然这不起作用。有没有另一种方法可以超越！important 那会吗？

Apparently this does not work. Is there another way to over ride !important that would?

页面可以来回切换所以我需要总是有一个或另一个。此外，如果我没有将！important 添加到css，那么叠加层将无限扩展（在facebook中，所以我假设那里存在问题）

The page can switch back and forth so I need to always have one or the other. Also if I do not add !important to the css then the overlay will expand in height infinitely (its in facebook so i am assuming there is an issue there)

有什么建议吗？

推荐答案

不要将样式应用于类。将一个类作为样式应用于div！

Dont apply styles to a class. Apply a class to your div as a style!

让jQuery为你完成所有工作

Let jQuery do all the work for you

你的风格表格中应包含这些类

You style sheet should have these classes in them

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

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

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

好的，那就是你的CSS排序了

Ok thats your CSS sorted

现在你的div

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

现在你可以使用jQuery操作你的div，方法是附加一个按钮/点击/悬停它你想要使用

Now you can use jQuery to manipulate your divs either by attaching to a button/click/hover whatever it is you wanna use

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

你不需要使用！important - 当真正使用时你开始遇到大CSS文件或几个加载样式的问题。

And you dont need to use !important - that is really used when you start having issues with large CSS files or several loaded styles.

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

This is instant but you can also add an effect

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

你可以添加像这样动态地为你的页面设置样式 - 并用另一个类替换所有现有的类，我们可以使用.attr（'class'，'newClass'）代替。

You can add styles dynamically to your page like this- and to replace all existing classes with another class, we can use .attr('class', 'newClass') instead.

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

但您不希望使用此方法编写现有样式。这应该用于'丢失'的情况。只是演示了jQuery的强大功能

But you do not want to be over writing your existing styles using this method. This should be used in a 'lost' case scenario. Just demonstrates the power of jQuery

这篇关于在jQuery的css（）函数中使用！important的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！