modify a css rule object with javascript
css, javascript, oocss
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`.
Here is a demonstration: http://jsfiddle.net/8Mnsf/1/
Problem
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,