在jQuery&＃39; s 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?

页面可以来回切换，所以我需要总是拥有一个。另外，如果我不向CSS添加！important ，则覆盖层的高度将无限扩大（它在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)

有什么建议吗？

推荐答案

不要将样式应用于类。

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排序

现在您的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&＃39; s css（）函数中使用！important的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！