How to dynamically change the value of a CSS property inside a stylesheet?

Question

If I have css:

.myclass
{
background: #FF00FF;
}

And html:

etc.


        
      

Answer 1

Here you go:

[].every.call( document.styleSheets, function ( sheet ) {
    return [].every.call( sheet.cssRules, function ( rule ) {
        if ( rule.selectorText === '.myclass' ) {
            rule.style.backgroundColor = 'green';
            return false;
        }
        return true;
    });
});

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

ES5-shim for IE8