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

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?

Did you try with a space ? `document.body.style.color = "green !important";` — Esailija, Oct 27 '11 at 14:42

score 109 · Answer 1 · edited May 15 '12 at 19:16

109

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

edited May 15 '12 at 19:16

Brock Adams

90,639
22
233
295

answered Oct 27 '11 at 17:05

Boris Zbarsky

34,758
5
52
55

1

IE9+ only. Apparently you can use setAttribute instead for – RTF Sep 19 '14 at 08:03
@RTF: Assuming the implementation is correct it should be possible - `!important` can legally appear in inline style declarations. – BoltClock Apr 26 '15 at 05:13
@RTF https://msdn.microsoft.com/en-us/library/ie/ms536739%28v=vs.85%29.aspx IE8 appears to support `setAttribute` – TylerH Apr 26 '15 at 05:13
@BoltClock, For which specs? – Pacerier Apr 14 '17 at 07:05
@Pacerier: css-style-attr, which simply follows the same grammar used in the rest of CSS. – BoltClock Apr 14 '17 at 07:40

score 11 · Answer 2 · answered Oct 02 '13 at 13:43

11

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

should work for you.

answered Oct 02 '13 at 13:43

Jay

1,980
1
13
23

That works if there are no other styles set on the element, otherwise it will overwrite any other styles on the element and lose them. – robocat Sep 29 '16 at 00:00
1

if there are other styles on the element, just concatenate your styles: `element.style.cssText += ';color: green !important;'` and you're safe on browsers that support `cssText` property! :) – guari Feb 08 '17 at 16:57
1

Method (i.e. `... += ...`) given by @guari works but only in upgrading the priority of a style to "!important". Downgrading from '!important', on the other hand, will fail. i.e. `element.style.cssText += 'color:blue'`, will fail while `element.style.cssText += 'color:blue !important'` will work. – codechimp Jul 06 '18 at 19:45

score 3 · Answer 3 · answered Aug 22 '16 at 10:04

3

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

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

answered Aug 22 '16 at 10:04

VISHNU

948
8
15

score 3 · Answer 4 · answered Oct 18 '16 at 06:38

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

score 1 · Answer 5 · answered Oct 27 '11 at 15:37

1

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

answered Oct 27 '11 at 15:37

Ahren Bader-Jarvis

11
1

hanks for the answers tried to inject document.body.style.color = "green !important"; onto bbc.co.uk using firefox firebug but no luck :( had a look at the style in firebug, it is due to * { color: #505050; } can't see "!important" qualifier in source so i am baffled @Ahren, i thought source (user important) trumped all other rules no matter what the specificity was? Ref:http://www.w3.org/TR/CSS2/cascade.html (6.4.1 cascading order) & if i injected !important, it would be a user important declaration overruling all other cad rules did not know about "accept functionality" :D – android_baby Oct 29 '11 at 19:26

score 0 · Answer 6 · edited Aug 10 '16 at 01:31

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

This will be beaten by a CSS style with ID-Selector and !important. HTML: ` This is a test! ` CSS: `#illwin { color: red !important; }` This will result in red colored text. http://jsfiddle.net/C6zH2/ — Fabian Barney, Oct 27 '11 at 17:23

score -1 · Answer 7 · edited Sep 21 '19 at 11:23

-1

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

edited Sep 21 '19 at 11:23

Zoe

27,060
21
118
148

answered Sep 21 '19 at 11:19

user12099245

1

Hey, Welcome stopping by at SO. However, this answer doesn't meet SO answering guidelines, is not clear. – Whirl Mind Sep 21 '19 at 11:37

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

7 Answers7

Linked

Related