如何在 jquery 中包含 !important
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1986182/
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
How to include !important in jquery
提问by Soft
I am trying to add !important in the css attribute using jQuery like
我正在尝试使用 jQuery 在 css 属性中添加 !important
$("tabs").css('height','650px;!important');
but !important has no effect. How to include !important in jquery?
但是 !important 没有效果。如何在 jquery 中包含 !important？
回答by klokop
Apparently it's possible to do this in jQuery:
显然可以在 jQuery 中做到这一点：
$("#tabs").css("cssText", "height: 650px !important;");
回答by Burner
I solved this problem with:
我用以下方法解决了这个问题：
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 user3711819
It is also possible to add more important properties:
还可以添加更重要的属性：
inputObj.attr('style', 'color:black !important; background-color:#428bca !important;');
inputObj.attr('style', 'color:black !important; background-color:#428bca !important;');
回答by Murat Kezli
var tabsHeight = 650;
$("tabs").attr('style', 'height: '+ tabsHeight +'px !important');
OR
或者
#CSS
.myclass{height:650px !important;}
then
然后
$("tabs").addClass("myclass");
回答by Bernesto
For those times when you need to use jquery to set !important properties, here is a plugin I build that will allow you to do so.
对于那些需要使用 jquery 设置 !important 属性的时候，这是我构建的一个插件，可以让您这样做。
$.fn.important = function(key, value) {
var q = Object.assign({}, this.style)
q[key] = `${value} !important`;
$(this).css("cssText", Object.entries(q).filter(x => x[1]).map(([k, v]) => (`${k}: ${v}`)).join(';'));
};
$('div').important('color', 'red');
回答by Vincent Tang
If you need to have jquery use !important for more than one item, this is how you would do it.
如果您需要让 jquery 对多个项目使用 !important，这就是您的做法。
e.g. set an imgtags max-width and max-height to 500px each
例如，将img标签的最大宽度和最大高度分别设置为 500 像素
$('img').css('cssText', "max-width: 500px !important;' + "max-height: 500px !important;');
回答by Will Meier
If you really need to override css that has !important rules in it, for instance, in a case I ran into recently, overriding a wordpress theme required !important scss rules to break the theme, but since I was transpiling my code with webpack and (I assume this is why --)my css came along in the chain after the transpiled javascript, you can add a separate class rule in your stylesheet that overrides the first !important rule in the cascade, and toggle the heavier-weighted class rather than adjusting css dynamically. Just a thought.
如果您真的需要覆盖其中包含 !important 规则的 css，例如，在我最近遇到的情况下，覆盖 wordpress 主题需要 !important scss 规则来破坏主题，但是因为我使用 webpack 和（我认为这就是为什么--）我的 css 在转译 javascript 之后出现在链中，您可以在样式表中添加一个单独的类规则来覆盖级联中的第一个 !important 规则，并切换更重的类而不是比动态调整css。只是一个想法。
回答by Marc W
You don't need !importantwhen modifying CSS with jQuery since it modifies the styleattribute on the elements in the DOM directly. !importantis only needed in stylesheets to disallow a particular style rule from being overridden at a lower level. Modifying styledirectly isthe lowest level you can go, so !importanthas no meaning.
!important使用 jQuery 修改 CSS 时不需要，因为它直接修改styleDOM 中元素的属性。!important仅在样式表中需要以禁止特定样式规则在较低级别被覆盖。style直接修改是你能去的最低级别，所以!important没有意义。
