Use JavaScript to alter a CSS rule within an object

Question

Similar Question:
Changing a CSS rule-set from Javascript

I am curious to know if it is possible to adjust Css stylesheet declarations without using inline styling.

For instance, consider the following example :

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

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

This code results in a box with blue text that changes to green on hover.

If I apply inline styling for the color attribute, the hover effect will be lost :

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

Here, the text in the box will always appear red.

Therefore, my question is how one can access and modify the css declaration object instead of replacing styles with inline ones.

Thank you.

Answer 1

Answer №1

To update your style rule, access the cssRules property on the DOM stylesheet object that corresponds to your initial stylesheet.

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

rules[0].style.backgroundColor = 'blue';

Keep in mind that Internet Explorer uses rules instead of cssRules.

You can see an example here: http://jsfiddle.net/8Mnsf/1/

Answer 2

To update your style rule, access the cssRules property on the DOM stylesheet object that corresponds to your initial stylesheet.

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

rules[0].style.backgroundColor = 'blue';

Keep in mind that Internet Explorer uses rules instead of cssRules.

You can see an example here: http://jsfiddle.net/8Mnsf/1/

Answer 3

To effectively manage your styles, define classes for different elements and use JavaScript to add or remove these classes as needed.

Applying styles directly to an element will take precedence over any other CSS rules that may be in place.

UPDATE: If you prefer a different approach, consider using the cssText property. Check out this example cssText property example

Answer 4

To effectively manage your styles, define classes for different elements and use JavaScript to add or remove these classes as needed.

Applying styles directly to an element will take precedence over any other CSS rules that may be in place.

UPDATE: If you prefer a different approach, consider using the cssText property. Check out this example cssText property example