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

Question

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?

Answer 1

Here you go:

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

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