## 如何使用 JavaScript 修改 CSS 规则而不使用内联样式？-css教程-PHP中文网

## 如何使用 JavaScript 修改 CSS 规则而不使用内联样式？

Linda Hamilton

发布： 2024-10-25 02:22:29

原创

666 人浏览过

## How to Modify CSS Rules with JavaScript Without Inline Styling?

使用 JavaScript 修改 CSS 规则而不使用内联样式

有时需要动态修改 CSS 声明而不诉诸内联样式。考虑以下示例：

<code class="html"><style>
    .box {color:green;}
    .box:hover {color:blue;}
</style>

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

登录后复制

这会生成一个蓝色框，悬停时会变成绿色。但是，内联样式可以覆盖此行为：

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

登录后复制

在这种情况下，无论悬停状态如何，该框将始终为红色。

要避免此问题，您可以修改CSS直接声明对象。具体方法如下：

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

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

登录后复制

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

这是一个演示：[Fiddle](http://jsfiddle.net/8Mnsf/1/)

以上是## 如何使用 JavaScript 修改 CSS 规则而不使用内联样式？的详细内容。更多信息请关注PHP中文网其他相关文章！