脚本化样式表

脚本化样式表时，需要处理两类对象，一类是元素对象，由<style>和<link>表示，它们是常规的文档元素；另一类是 CSSStyleSheet 对象，它们表示样式本身，可以通过 document.styleSheets 属性获取，返回一个 CSSStyleSheet 对象，表示与文档关联的样式表。

开启和关闭样式表

<link>、<style> 元素和 CSSStyleSheet 对象都定义了一个可以在 JavaScript 中设置和查询的 disabled 属性，如果该属性设置为 true，样式表就会被浏览器关闭并忽略。

查询、插入和删除样式表规则

除了样式表的开启和关闭之外，CSSStyleSheet 对象还定义了用来查询、插入和删除样式表规则的 API。

CSSStyleSheet 对象有一个 cssRules 数组，包含样式表的所有规则（IE使用的是 rules 代替cssRules）：

var firstRule = document.styleSheets[0].cssRules[0];

cssRules 数组元素是 CSSRule 对象，在标准 API 中，CSSRule 代表所有 CSS 规则，包括 @import 和 @page 等指令。CSSRule 对象有两个有用的属性：

• selectorText：引用的是 CSSStyleDeclaration 对象，可用于查询或设置新样式
• cssText：用于查询样式规则的文本表示

除了查询和修改样式表中已有的规则外，还可以向样式表添加/删除规则，标准的 API 接口为此定义了 insertRule() 和 deleteRule() 方法（IE 不支持这两个方法，但是定义了大致等效的 addRule() 和 removeRule() 方法）：

document.styleSheets[0].insertRule("h1 { text-weight: bold; }", 0);

下面是一个示例，遍历样式表规则，并通过 API 对其进行一些修改：

var ss = document.styleSheets[0];
var rules = ss.cssRules ? ss.cssRules : ss.rules;

for (var i = 0; i < rules.length; i++) {
  var rule = rules[i];
  // 跳过 @import 和非样式规则
  if (!rule.selectorText)
    continue;

  var selector = rule.selectorText;
  var ruleText = rule.style.cssText;

  if (selector === "h1") {
    if (ss.insertRule)
      ss.insertRule("h2 {" + ruleText + "}", rules.length);
    else if (ss.addRule)
      ss.addRule("h2", ruleText, rules.length);
  }

  if (rule.style.textDecoration) {
    if (ss.deleteRule)
      ss.deleteRule(i);
    else if (ss.removeRule)
      ss.removeRule(i);
    i--; // 调整循环索引
  }
}

创建新样式表

最后，我们还可以创建整个新样式表并将其添加到文档。在大多数浏览器中，这可以通过标准的 DOM 技术实现，但在 IE8 及更早版本中，CSSStyleSheet 对象可以通过非标准方法 document.createStyleSheet() 方法来创建，样式文本可以通过 cssText 属性来指定。