Javascript 在 jQuery 的 css() 函数中使用 !important
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5824079/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using !important in jQuery's css() function
提问by Stanley Cup Phil
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;
}
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:
我拥有的页面将有两个不同的页面高度。为了解决这个问题，我在我的 JS 文件中做了这个：
If small one visible:
如果小一个可见：
$('.ui-widget-overlay').css("height", "985px !important");
else
别的
$('.ui-widget-overlay').css("height", "1167px !important");
Apparently this does not work. Is there another way to over ride !importantthat would?
显然这是行不通的。有没有另一种方法可以超越!important它？
The page can switch back and forth so I need to always have one or the other. Also if I do not add !importantto the css then the overlay will expand in height infinitely (its in facebook so i am assuming there is an issue there)
页面可以来回切换，所以我需要总是有一个。此外，如果我不添加!important到 css，那么覆盖层的高度将无限扩展（它在 facebook 中，所以我假设那里存在问题）
Any suggestions?
有什么建议？
采纳答案by Piotr Kula
Dont apply styles to a class. Apply a class to your div as a style!
不要将样式应用于类。将类作为样式应用于您的 div！
Let jQuery do all the work for you
让 jQuery 为您完成所有工作
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; }
Ok thats your CSS sorted
好的，这就是你的 CSS 排序
now your div
现在你的 div
<div id="myWidget" class="ui-widget-overlay ui-widget-small"> YOUR STUFF </div>
Now you can use jQuery to manipulate your divs either by attaching to a button/click/hover whatever it is you wanna use
现在，您可以使用 jQuery 来操作您的 div，方法是通过附加到按钮/单击/悬停您想要使用的任何内容
$('#myWidget').removeClass('ui-widget-small').addClass('ui-widget-full')
And you dont need to use !important - that is really used when you start having issues with large CSS files or several loaded styles.
并且您不需要使用 !important - 当您开始遇到大型 CSS 文件或多个加载样式的问题时，真正使用它。
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') } )
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.
您可以像这样将样式动态添加到您的页面 - 并且要将所有现有类替换为另一个类，我们可以使用 .attr('class', 'newClass') 代替。
$('body').prepend('<style type="text/css"> .myDynamicWidget { height: 450px; } </style>')
$('#myWidget').attr('class', 'ui-widget-overlay')
$('#myWidget').addClass('myDynamicWidget')
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的强大
回答by ghosh'.
There is a trick to do this.
有一个技巧可以做到这一点。
$('.ui-widget-overlay').css('cssText', 'height:985px !important;');
$('.ui-widget-overlay').css('cssText', 'height:1167px !important;');
cssTextis doing the trick here. It is appending css styles as string, not as variable.
cssText在这里起到了作用。它将 css 样式附加为字符串，而不是变量。
回答by Dan Blows
You could try using $(this).attr('style', 'height:1167px !important');I haven't tested it, but it should work.
您可以尝试使用$(this).attr('style', 'height:1167px !important');我还没有测试过它，但它应该可以工作。
回答by Gabriele Petrioli
You can create a dynamic stylesheet with rules that override the properties you want and apply it on the page.
您可以创建一个动态样式表，其规则覆盖您想要的属性并将其应用到页面上。
var $stylesheet = $('<style type="text/css" media="screen" />');
$stylesheet.html('.tall{height:1167px !important;} .short{height:985px !important}');
$('body').append($stylesheet);
Now, when you add our newly created classes, they will take precedence since they are the last defined.
现在，当您添加我们新创建的类时，它们将优先，因为它们是最后定义的。
$('.ui-widget-overlay').addClass('tall');
demo athttp://jsfiddle.net/gaby/qvRSs/
演示在http://jsfiddle.net/gaby/qvRSs/
update
更新
For pre-IE9 support use
对于 IE9 之前的支持使用
var $stylesheet = $('<style type="text/css" media="screen">\
.tall{height:300px !important;}\
.short{height:100px !important}\
</style>');
$('body').append($stylesheet);
回答by David Ruttka
Unless I've misread your question, what you're doing does work in jsfiddle.
除非我误读了您的问题，否则您在做什么在 jsfiddle 中确实有效。
EDIT:My fiddle only works in some browsers (so far, Chrome: pass, IE8: fail).
编辑：我的小提琴仅适用于某些浏览器（到目前为止，Chrome：通过，IE8：失败）。
回答by Burner
I solved this problem like this:
我是这样解决这个问题的：
inputObj.css('cssText', inputObj.attr('style')+'padding-left: ' + (width + 5) + 'px !IMPORTANT;');
So no inline-Style is lost, an the last overrides the first
所以没有内联样式丢失，最后一个覆盖第一个
回答by Nirav
Please remove height attribute from class and then try to implement your if and else condition.
请从类中删除高度属性，然后尝试实现您的 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");
Enjoy code....keep smiling...
享受代码......保持微笑......
