anonymous-one anonymous-one - 1 year ago 70
CSS Question

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

Is it possible to alter a CSS stylesheet using JavaScript?

I am NOT talking about:


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?

Once again, thanks, long live SO!

Answer Source

As of 2011

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

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download