我无法使用“！important”规则注入样式

Question

I tried to inject a style using this code:

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

Per the CSS cascade ref , by applying the !important rule I can trump origin and specificity.

I tried to inject this using Firefox Firebug into www.google.com however no luck.

How do I inject a foreground color with an !important rule?

Answer 1

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

document.body.style.setProperty ("color", "green", "important");

Answer 2

element.style.cssText = 'color:green !important';

应该适合你。

Answer 3

all answers are great but they all assumed the value of the attribute is fixed ,, what if not

take look at my solution

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

instead of hand writing the value, I got it using jquery $(this).css('attr')

Answer 4

style.cssText is the only way to add !important.

<script>
   document.body.style.cssText='color: red !important;'
</script>

Answer 5

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.

In that way, you have to dynamicaly create stylesheet and ad it inside 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;}')

Answer 6

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.

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.

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";
}