javascript - 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);