How can one set a CSS property with the !important flag via the DOM?

css, dom, javascript

Solution

Here you go:

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

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

Problem

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?

Original source