How to Modify CSS Declaration Objects in JavaScript without Overwriting Existing Styles?

Accessing and Modifying CSS Declaration Objects

In web development, you may encounter the need to modify CSS styles without resorting to inline styling, which can overwrite existing styles and disrupt functionality. This article will demonstrate how to access and modify CSS declaration objects using JavaScript.

Consider the following CSS code:

<code class="css">.box {
  color: green;
}

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

This CSS creates a box with green text that turns blue on hover. However, if you apply inline styling for color, the hover behavior will be lost:

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

To avoid this issue, you can access the CSS declaration object and modify it directly. JavaScript provides the cssRules property on the DOM stylesheet object that corresponds to your stylesheet. You can use this property to get an array of all CSS rules.

To modify a CSS rule, you can use the style property of the rule object. For example, to change the color of the box to red, you could use the following JavaScript:

<code class="javascript">var sheet = document.styleSheets[0];
var rules = sheet.cssRules || sheet.rules;

rules[0].style.color = 'red';</code>

Note that IE uses rules instead of cssRules.

You can see a demonstration of this technique at http://jsfiddle.net/8Mnsf/1/.

The above is the detailed content of How to Modify CSS Declaration Objects in JavaScript without Overwriting Existing Styles?. For more information, please follow other related articles on the PHP Chinese website!