I'm unable to inject a style with an "!important" rule

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?

Per the spec, if you want to set the priority, not just the value, you have to use setProperty, like so:

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

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

should work for you.

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

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

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')

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;}')

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

i need to keep !important for the following code how to do

<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>?