使用 JavaScript 修改 CSS 值

JavaScript 提供了一种设置内联 CSS 值的简单方法。然而，当修改非内联样式表中定义的 CSS 值时，此方法可能会带来挑战。

从样式表中检索 CSS 值

要检索非内联样式表中的 CSS 值非内联，JavaScript 允许通过 document.styleSheets 访问样式表。此函数返回文档中所有样式表的数组。要查找特定样式表，请使用 document.styleSheets[styleIndex].href 属性。

修改样式表 CSS 规则

识别所需样式表后，下一步就是获取CSS规则数组。对于 Internet Explorer，可以使用 Rules 属性来访问该数组；对于大多数其他浏览器，可以使用 cssRules 来访问该数组。每个规则都可以通过其 selectorText 属性来区分。

要修改 CSS 值，请设置规则的 value 属性。更新后的代码看起来类似于：

var cssRuleCode = document.all ? 'rules' : 'cssRules'; //account for IE and FF
var rule = document.styleSheets[styleIndex][cssRuleCode][ruleIndex];
var selector = rule.selectorText;  //maybe '#tId'
var value = rule.value;            //both selectorText and value are settable.

这种方法允许您全局更改 CSS 值，有效地更新具有指定样式的所有元素。