javascript-我无法使用“!important” ru注入样式

我尝试使用以下代码注入样式:

document.body.style.color='green!important';

根据CSS级联参考,通过应用!important规则,我可以胜过起源和特异性。

我尝试使用Firefox Firebug将其注入www.google.com,但是没有运气。

如何使用!important规则注入前景色?

android_baby asked 2020-06-26T16:26:12Z
7个解决方案
98 votes

根据规范,如果要设置优先级,而不仅仅是值,则必须使用setProperty,如下所示:

document.body.style.setProperty ("color", "green", "important");
Boris Zbarsky answered 2020-06-26T16:26:26Z
8 votes
element.style.cssText = 'color:green !important';

应该为您工作。

Jayachandran answered 2020-06-26T16:26:46Z
2 votes

所有答案都很好,但是他们都假设属性的hand writing$(this).css('attr'),如果没有,该怎么办

看我的解决方案

this.style.setProperty("color", $(this).css('color'), "important");

我使用jQuery $(this).css('attr')而不是hand writing的值

Basheer AL-MOMANI answered 2020-06-26T16:27:15Z
1 votes

我想提出的是,由于代码中的任何错误(空格除外),它可能无法正常工作,但更多的是因为修改body标签不是一个足够具体的元素,类或您想要创建所需的东西 影响。

例如,搜索结果的页面文本具有“ st”类。所有搜索结果均封装在<li>标签。

因此,达到这种效果的一些代码可能如下所示:

var arr = document.getElementsByClassName('st');
for(i=0; i<arr.length; i++){
    arr[i].style.color="green";
}
Ahren Bader-Jarvis answered 2020-06-26T16:27:44Z
1 votes

仅使用此:

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;}')
Marian Bazalik answered 2020-06-26T16:28:18Z
1 votes

style.cssText是添加!important的唯一方法。

<script>
   document.body.style.cssText='color: red !important;'
</script>
VISHNU Radhakrishnan answered 2020-06-26T16:28:38Z
-1 votes

我需要保持!重要的以下代码

<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>?
user12099245 answered 2020-06-26T16:28:58Z
translate from https://stackoverflow.com:/questions/7917608/im-unable-to-inject-a-style-with-an-important-rule