如何使用 JavaScript 动态修改 CSS 声明？

使用 JavaScript 访问和修改 CSS 声明

要动态修改 CSS 声明，而不诉诸内联样式，请访问 CSS 规则集对象从 DOM 样式表。

如何修改 CSS 声明

1. 获取样式表对象：

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

2. 检索 CSS 规则：

   <code class="javascript">var rules = sheet.cssRules || sheet.rules;</code>

3. 使用索引选择所需的规则：

   <code class="javascript">var rule = rules[0];</code>

4. 修改规则的样式：

   <code class="javascript">rule.style.color = 'red';</code>

示例

考虑以下示例：

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

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

更改文本颜色.box 变为红色，而不影响悬停行为：

<code class="javascript">var sheet = document.styleSheets[0];
var rules = sheet.cssRules || sheet.rules;
rules[0].style.color = 'red';</code>

Internet Explorer 注意

Internet Explorer 使用规则而不是 cssRules 来访问 CSS 规则。

演示

使用 JavaScript 访问和修改 CSS 声明的现场演示可以在以下位置找到：http://jsfiddle.net/8Mnsf/1/

以上是如何使用 JavaScript 动态修改 CSS 声明？的详细内容。更多信息请关注PHP中文网其他相关文章！