如何在 JavaScript 中修改 CSS 声明对象而不覆盖现有样式？

访问和修改CSS声明对象

在Web开发中，您可能会遇到需要修改CSS样式而不求助于内联样式的情况，这可以覆盖现有样式并破坏功能。本文将演示如何使用 JavaScript 访问和修改 CSS 声明对象。

考虑以下 CSS 代码：

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

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

此 CSS 创建一个带有绿色文本的框，悬停时会变成蓝色。但是，如果您对颜色应用内联样式，则悬停行为将丢失：

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

要避免此问题，您可以访问 CSS 声明对象并直接修改它。 JavaScript 在与您的样式表相对应的 DOM 样式表对象上提供 cssRules 属性。您可以使用此属性获取所有 CSS 规则的数组。

要修改 CSS 规则，您可以使用规则对象的 style 属性。例如，要将框的颜色更改为红色，您可以使用以下 JavaScript：

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

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

请注意，IE 使用规则而不是 cssRules。

您可以看到以下演示该技术位于http://jsfiddle.net/8Mnsf/1/。

以上是如何在 JavaScript 中修改 CSS 声明对象而不覆盖现有样式？的详细内容。更多信息请关注PHP中文网其他相关文章！