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

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

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