我无法使用“！important”规则注入样式[重复]
Posted
技术标签:
【中文标题】我无法使用“！important”规则注入样式[重复]【英文标题】：I'm unable to inject a style with an "!important" rule [duplicate] 【发布时间】：2011-12-16 14:03:29 【问题描述】：我尝试使用以下代码注入样式：
document.body.style.color='green!important';
根据the CSS cascade ref，通过应用!important 规则，我可以胜过起源和特异性。
我尝试使用 Firefox Firebug 将其注入 www.google.com，但没有成功。
如何使用!important 规则注入前景色？
【问题讨论】：
你试过空格吗？document.body.style.color = "green !important";
【参考方案1】：
根据规范，如果你想设置优先级，而不仅仅是值，你必须使用setProperty，像这样：
document.body.style.setProperty ("color", "green", "important");
【讨论】：
仅限 IE9+。显然你可以使用 setAttribute 代替!important 可以合法地出现在内联样式声明中。
@RTF msdn.microsoft.com/en-us/library/ie/ms536739%28v=vs.85%29.aspx IE8 似乎支持setAttribute
@BoltClock，适用于哪些规格？
@Pacerier: css-style-attr，它只是遵循 CSS 其余部分使用的相同语法。【参考方案2】：
element.style.cssText = 'color:green !important';
应该适合你。
【讨论】：
如果元素上没有设置其他样式，则可以使用，否则它将覆盖元素上的任何其他样式并丢失它们。 如果元素上有其他样式，只需连接您的样式：element.style.cssText += ';color: green !important;'，您在支持 cssText 属性的浏览器上是安全的！ :)
@guari 提供的方法（即... += ...）有效，但仅用于将样式的优先级升级为“！important”。另一方面，从 '!important' 降级会失败。即element.style.cssText += 'color:blue'，将失败而element.style.cssText += 'color:blue !important' 将工作。【参考方案3】：
style.cssText 是添加 !important 的唯一方法。
<script>
document.body.style.cssText='color: red !important;'
</script>
【讨论】：
【参考方案4】：所有答案都很好，但他们都假设属性的value 是fixed，如果不是，该怎么办
看看我的解决方案
this.style.setProperty("color", $(this).css('color'), "important");
而不是 hand writing 的值，我使用 jquery $(this).css('attr') 得到它
【讨论】：
【参考方案5】：我想提出它可能不是因为代码中的任何错误（除了空格）而无法正常工作，而是更多是因为修改 body 标签不是一个足够具体的元素、类或你有什么创造想要的效果。
例如，搜索结果的页面文本具有“st”类。
所有搜索结果都封装在一个
<li>
标签。
所以一些实现这种效果的代码可能如下所示：
var arr = document.getElementsByClassName('st');
for(i=0; i<arr.length; i++)
arr[i].style.color="green";
【讨论】：
感谢答案尝试注入 document.body.style.color = "green !important";使用 firefox firebug 进入 bbc.co.uk 但没有运气 :( 看看 firebug 中的样式，这是由于 * color: #505050; 在源代码中看不到“！important”限定符，所以我很困惑@Ahren，我认为源（用户重要）胜过所有其他规则，无论具体是什么？参考：w3.org/TR/CSS2/cascade.html（6.4.1 级联顺序）&如果我注入！重要，这将是一个用户重要声明推翻所有其他cad 规则不知道“接受功能”：D【参考方案6】：只使用这个：
document.body.style.color="green";
您可以不必以这种方式使用重要。无论如何，正如 Fatal 指出的那样，当 css 样式表中有直接重要的规则需要覆盖时，这将不起作用。
这样，您必须动态地创建样式表并将其添加到 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));
然后就可以这样更新样式了
addNewStyle('body color:green !important;')
【讨论】：
这将被带有 ID-Selector 和 !important 的 CSS 样式击败。 HTML：<body id="illwin" style="color:green;"> This is a test! </body> CSS：#illwin color: red !important; 这将导致红色文本。 jsfiddle.net/C6zH2【参考方案7】：
我需要保留 !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>?
【讨论】：
嘿，欢迎光临 SO。但是，此答案不符合 SO 回答准则，不清楚。以上是关于我无法使用“！important”规则注入样式[重复]的主要内容，如果未能解决你的问题，请参考以下文章
[ css 权重 !important ] 使用CSS的!important讲解及实例演示