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 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

i think you are looking for this:

http://www.hunlock.com/blogs/Totally_Pwn_CSS_with_Javascript

this lets you change the actual rules with javascript. ive used it once, a few years ago it seemed to have worked.

Answer 2

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