Is it possible to alter a CSS stylesheet using JavaScript? (NOT the style of an object, but the stylesheet itself)

Question

Is it possible to alter a CSS stylesheet using JavaScript?

I am NOT talking about:

document.getElementById('id').style._____='.....'; 

I AM talking about altering:

#id {     param: value; } 

besides doing something dirty (which we haven’t tried yet btw), like creating a new object in the head, innerHTML a style tag in there, etc. Although this, even if it did work, would pose a few issues as the style block is already defined elsewhere, and I’m not sure when/if the browser would even parse a dynamically created style block?

Answer 1

As of 2011

Yes you can, but you will be facing cross-browser compatibility issues:

http://www.quirksmode.org/dom/changess.html

As of 2016

Browser support has improved a lot (every browser is supported, including IE9+).

• The insertRule() method allows dynamic addition of rules to a stylesheet.

• With deleteRule(), you can remove existing rules from a stylesheet.

• Rules within a stylesheet can be accessed via the cssRules attributes of a stylesheet.

Answer 2

We can use a combination of .insertRule and .cssRules to be able to do this all the way back to IE9:

function changeStylesheetRule(stylesheet, selector, property, value) {     // Make the strings lowercase     selector = selector.toLowerCase();     property = property.toLowerCase();     value = value.toLowerCase();          // Change it if it exists     for(var i = 0; i < stylesheet.cssRules.length; i++) {         var rule = stylesheet.cssRules[i];         if(rule.selectorText === selector) {             rule.style[property] = value;             return;         }     }        // Add it if it does not     stylesheet.insertRule(selector + " { " + property + ": " + value + "; }", 0); }  // Used like so: changeStylesheetRule(s, "body", "color", "rebeccapurple"); 

Demo