How to change/remove CSS classes definitions at runtime?

Question

I know it is possible to add new CSS classes definitions at runtime through JavaScript. But...

How to change/remove CSS classes definitions at runtime?

For instance, supose a I have the class below:

<style> .menu { font-size: 12px; } </style> 

What I want is, at runtime, change the font-size rule of the .menu class, so that every element in the page who uses this class will be affected.

And, I also want to know how to remove the .menu class definition.

Answer 1

It's not difficult to change CSS rules at runtime, but apparently it is difficult to find the rule you want. PPK has a quick tour of this on quirksmode.org.

You'll want to use document.styleSheets[i].cssRules which is an array you need to parse through to find the one you want, and then rule.style.setProperty('font-size','10px',null);

Answer 2

I found an answer at http://twelvestone.com/forum_thread/view/31411 and I'm reproducing parts of the thread here, verbatim, because I'm afraid the thread, and the very helpful answer, will evaporate.

Flip 2006.06.26, 02:45PM — [ Crunchy Frog ] posts: 2470 join date: 2003.01.26

Well after about 10 to 12 hours of searching, reading, and tinkering I've done it! I am CSS/JS code Ninja today!

The JS code used is as follows:

<script language="JavaScript"> function changeRule(theNumber) {     var theRules = new Array();     if (document.styleSheets[0].cssRules) {         theRules = document.styleSheets[0].cssRules;     } else if (document.styleSheets[0].rules) {         theRules = document.styleSheets[0].rules;     }     theRules[theNumber].style.backgroundColor = '#FF0000'; } </script> 

I've tested this on FF(Mac), Safari(Mac), O9(Mac), IE5(Mac), IE6(PC), FF(PC) and they all work. The reason for the 'if' statement is some of the browsers use cssRules... some use just rules... And the only other hair is that you can't use "background-color" to refer to the style, you have to get rid of the hyphen and capitalize the first letter after the hyphen.

To refer to the first CSS rule you'd use "changeRule(0)", the second "changeRule(1)" and the third "changeRule(2)" and so on...

I haven't found a browser it doesn't work on.... yet.... Anything you say can and will be used against you. Over and over and over.

---

BillyBones 2011.01.20, 11:57AM — [ in the barrel ] posts: 1 join date: 2011.01.20

Hello, I registered in these forums just to add this little bit as I could not conveniently find it elsewhere:

function changeStyle(selectorText) {     var theRules = new Array();     if (document.styleSheets[0].cssRules) {         theRules = document.styleSheets[0].cssRules;     }      else if (document.styleSheets[0].rules) {         theRules = document.styleSheets[0].rules;     }     for (n in theRules)     {         if (theRules[n].selectorText == selectorText)   {             theRules[n].style.color = 'blue';         }     } } 

This simply makes the CSS rule identifiable by its selector name rather than by its index number in the cssRules array.

In other words, you can execute the Javascript function with the string argument "selectorText" instead of a number that is difficult to remember and susceptible to frequent changes if new styles are added.

Thank you for your 10 to 12 hours of research, Flip, I hope I made a worthy addition.