Javascript 我无法使用“！重要”规则注入样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7917608/
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
I'm unable to inject a style with an "!important" rule
提问by android_baby
I tried to inject a style using this code:
我尝试使用以下代码注入样式：
document.body.style.color='green!important';
Per the CSS cascade ref, by applying the !importantrule I can trump origin and specificity.
根据CSS 级联 ref，通过应用!important规则，我可以胜过起源和特异性。
I tried to inject this using Firefox Firebug into www.google.com however no luck.
我尝试使用 Firefox Firebug 将其注入 www.google.com，但没有成功。
How do I inject a foreground color with an !importantrule?
如何使用!important规则注入前景色？
回答by Boris Zbarsky
Per the spec, if you want to set the priority, not just the value, you have to use setProperty, like so:
根据规范，如果要设置优先级，而不仅仅是值，则必须使用setProperty，如下所示：
document.body.style.setProperty ("color", "green", "important");
回答by Jayachandran
element.style.cssText = 'color:green !important';
should work for you.
应该为你工作。
回答by Basheer AL-MOMANI
all answers are great but they all assumed the valueof the attribute is fixed,, what if not
所有的答案都很好，但他们都假设value属性是fixed，如果不是怎么办
take look at my solution
看看我的解决方案
this.style.setProperty("color", $(this).css('color'), "important");
instead of hand writingthe value, I got it using jquery $(this).css('attr')
而不是hand writing值，我使用 jquery 得到它$(this).css('attr')
回答by VISHNU Radhakrishnan
style.cssText is the only way to add !important.
style.cssText 是添加 !important 的唯一方法。
<script>
document.body.style.cssText='color: red !important;'
</script>
回答by Marian Bazalik
Use only this:
仅使用此：
document.body.style.color="green";
you can not have to use important in this way. Anyway as Fatal pointed out, this will not work, when there is directly important rule in css stylesheet, that you need to override.
您可以不必以这种方式使用重要。无论如何，正如 Fatal 所指出的那样，当 css 样式表中有直接重要的规则需要覆盖时，这将不起作用。
In that way, you have to dynamicaly create stylesheet and ad it inside head:
这样，您必须动态创建样式表并将其添加到 head 中：
function addNewStyle(newStyle) {
var styleElement = document.getElementById('styles_js');
if (!styleElement) {
styleElement = document.createElement('style');
styleElement.type = 'text/css';
styleElement.id = 'styles_js';
document.getElementsByTagName('head')[0].appendChild(styleElement);
}
styleElement.appendChild(document.createTextNode(newStyle));
}
Then you can update style just like that
然后你可以像这样更新样式
addNewStyle('body {color:green !important;}')
回答by Ahren Bader-Jarvis
I would like to pose that it may not be working not so much due to any error in code (excepting the space) but more because modifying the body tag isn't a specific enough element, class, or what have you to create the desired effect.
我想提出它可能不是因为代码中的任何错误（空格除外）而无法正常工作，而是因为修改 body 标签不是一个足够具体的元素、类，或者你有什么来创建所需的影响。
Like for instance the page text of a search result has a class of "st".
all search results are each encapsulated in an
<li>tag.
例如，搜索结果的页面文本具有“st”类。所有搜索结果都封装在一个
<li>标签中。
So some code to such effect might look like this:
因此，具有这种效果的一些代码可能如下所示：
var arr = document.getElementsByClassName('st');
for(i=0; i<arr.length; i++){
arr[i].style.color="green";
}
回答by user12099245
i need to keep !important for the following code how to do
我需要保持 !important 下面的代码怎么做
<script> var size = $(window).width();
if(size >="1900" && size <="2890"){
$(document).ready(function(){ $(".myMove").click(function(){ $(".hqnblogo").animate({ left:'-22% ', top: '67%', height:'7%', }); $(".hqnbnaturalslogo").animate({ left: '86%', top: '20px', height:'7%', }); }); }); } </script>?
