modify a css rule object with javascript [duplicate]

Question

Possible Duplicate:
Changing a CSS rule-set from Javascript

I was wondering if there is any possibility to modify Css stylesheet declarations without going for inline styling.

Here is a quick example :

<style>
    .box {color:green;}
    .box:hover {color:blue;}
</style>

<div class="box">TEXT</div>

That gives a blue written box that turns green written on hover.

If I give inline styling for the color, the hover behavior will be lost :

<div class="box" style="color:red;">TEXT</box>

That gives a red written box, no matter what.

So my question is, how can one access and modify the css declaration object rather than overwriting styles with inline ones.

Thanks,

Answer 1

You could use the cssRules on the DOM stylesheet object corresponding to your original stylesheet to modify your rule.

var sheet = document.styleSheets[0];
var rules = sheet.cssRules || sheet.rules;

rules[0].style.color = 'red';

Note that IE uses rules instead of cssRules.

Here is a demonstration: http://jsfiddle.net/8Mnsf/1/