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,

Solution

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.

OTHER TIPS

Just define your classes, and assign/remove classes to HTML elements with javascript.

Directly assigning style to an element, has highest priority, It will override all other CSS rules.

EDIT: you may want to use cssText property, see example here cssText property

Licensed under: CC-BY-SA with attribution

Not affiliated with StackOverflow