Javascript 使用带有 !important 标签的 jquery 更改 div 的背景颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10674158/
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
change background color of div with jquery that has an !important tag
提问by elzi
Using a plugin that calls a .jsp that uses its own stylesheet hosted externally (it's a yelp embed - trying to manipulate the look of it). The one element I'm trying to change has an !important tag on it, and I can't seem to change it...
使用调用 .jsp 的插件，该插件使用外部托管的自己的样式表（它是 yelp 嵌入 - 试图操纵它的外观）。我要更改的一个元素上有一个 !important 标签，但我似乎无法更改它...
I tried
我试过
<script type="text/javascript">
$('.elementToChange').css({'background-color':'black'});?
</script>
to no avail. Ideas?
无济于事。想法？
回答by RichardTowers
It looks like in more up-to-date versions of jQuery (at least 1.7.2 and higher) you can simply set the css:
看起来在更新的 jQuery 版本（至少 1.7.2 及更高版本）中，您可以简单地设置 css：
$('#elementToChange').css('background-color', 'blue');
See http://jsfiddle.net/HmXXc/185/
见http://jsfiddle.net/HmXXc/185/
In older versions of jQuery and Zepto you had to clear the css first:
在旧版本的 jQuery 和 Zepto 中，您必须先清除 css：
// Clear the !important css
$('#elementToChange').css('background-color', '');
And then reset it using:
然后使用以下方法重置它：
$('#elementToChange').css('background-color', 'blue');
Or in a one-liner:
或者单线：
$('#elementToChange')
.css('background-color', '')
.css('background-color', 'blue');
See http://jsfiddle.net/HmXXc/186/.
见http://jsfiddle.net/HmXXc/186/。
Original answer:
原答案：
Note: this may be a bad idea, as it will remove any other inline styles
注意：这可能是一个坏主意，因为它会删除任何其他内联样式
I would edit the style attribute directly
我会直接编辑样式属性
$('.elementToChange').attr('style', 'background-color: blue !important');
回答by Sergej Jevsejev
Here is your solution:
这是您的解决方案：
http://jsfiddle.net/irpm/bdhpp/2/
http://jsfiddle.net/irpm/bdhpp/2/
The idea is to add the class:
这个想法是添加类：
$('.elementToChange').addClass('blackBg');
回答by Ankit Jain
You can manipulate !important css by using following steps, either you can use inline-css or Internal css or you can load your own external css after the order of that preloaded css, it will help you to override that css with your custom one.
您可以使用以下步骤操作 !important css，您可以使用 inline-css 或 Internal css，也可以按照预加载 css 的顺序加载自己的外部 css，它将帮助您使用自定义的 css 覆盖该 css。
<html>
<head>
<!--
//First Solution
//PreloaderCSS
//YourCustomCSS
//Second Solution
Internal CSS -->
</head>
<body>
<!--
Third solution
//Inline CSS
->
</body>
</html>
回答by Orhun Alp Oral
You can use the following function:
您可以使用以下功能：
function replaceBGColorImportant(element,newColor){
var styles = element.getAttribute('style');
styles = styles?styles.split(';'):[];
var newStyles = [];
styles.map(function(x){
if (x.split(':')[0] != "background-color")
newStyles.push(x);
});
newStyles.push('background-color:#'+newColor+' !important');
element.setAttribute('style',newStyles.join(';'));
}
Execute as follows:
执行如下：
replaceBGColorImportant(document.body,'#009922');
回答by Razan Paul
Via regular expression: https://jsfiddle.net/7jj7gq3y/2/
通过正则表达式：https: //jsfiddle.net/7jj7gq3y/2/
HTML:
HTML：
<div class="elementToChange" style=" background-color: yellow !important; width: 100px; height: 100px;"></div>
JavaScript:
JavaScript：
var setImportantStyle = function(element, attributeName, value) {
var style = element.attr('style');
if (style === undefined) return;
var re = new RegExp(attributeName + ": .* !important;", "g");
style = style.replace(re, "");
element.css('cssText', attributeName + ': ' + value + ' !important;' + style);
}
setImportantStyle($('.elementToChange'), 'background-color', 'red');
