So, in my stylesheet, I have a property in a rule that matches myElement which uses the !important flag.

Then, in a script, I need to adjust that property of myElement. The code I'm using does nothing:

var myElement = document.getElementById('myElement');
myElement.style.property = 'newValue';

This threw me for a loop, because while nothing was visibly happening on my page, the element even showed with the new property value under element.style in Chrome's element inspector. So it took me a while to figure it out, but then it hit me that I have to also put the !important flag in the newValue setting. Does anyone know how to do this programmatically?

So, in my stylesheet, I have a property in a rule that matches myElement which uses the !important flag.

Then, in a script, I need to adjust that property of myElement. The code I'm using does nothing:

var myElement = document.getElementById('myElement');
myElement.style.property = 'newValue';

This threw me for a loop, because while nothing was visibly happening on my page, the element even showed with the new property value under element.style in Chrome's element inspector. So it took me a while to figure it out, but then it hit me that I have to also put the !important flag in the newValue setting. Does anyone know how to do this programmatically?

• javascript
• css
• dom

• 1 And so begins the !important war... Real solution is to not use it. – No Results Found Commented Dec 7, 2012 at 14:42
• 3 this question is a great description of why using !important anywhere in your code is generally a bad idea. – SDC Commented Dec 7, 2012 at 14:43

1 Answer 1

Here you go:

myElement.style.setProperty( 'property', 'newValue', 'important' );

Live demo: http://jsfiddle.net/mJHEf/