DOM与CSS样式表

在前文 《DOM与元素节点内联样式》中我们了解了用 DOM 提供的接口操作元素节点内联样式的方法，今天我们来学习一下如何用 DOM 操作 CSS 样式表。

CSS 样式表概况

---

通过使用 HTMLLinkElement 节点引入外部样式表，或者使用 HTMLStyleElement 节点来定义内联样式表，都可以添加样式表到 HTML 文档。在如下 HTML 文档中，这两种 Element 节点都在 DOM 中，并且我们可以验证哪个构造器构造了这些节点。

<link id='linkElement' href='h.css' rel='stylesheet' type='text/css'>
<style id='styleElement'>
  div {
    background-color: black;
  }
</style>

<script>
  // 输出 function HTMLLinkElement() { [native code] }
  console.log(document.querySelector('#linkElement').constructor);

  // 输出 function HTMLStyleElement() { [native code] }
  console.log(document.querySelector('#styleElement').constructor);
</script>

一有样式表添加到 HTML 文档中，它即表示为 CSSStyleSheet 对象。样式表里每条 CSS 规则（如 div {background-color: black;}）都表示为一个 CSSStyleRule 对象。在如下代码中，我们可以验证是哪个构造器构造了样式表中的每个 CSS 规则。

<link id='linkElement' href='h.css' rel='stylesheet' type='text/css'>
<style id='styleElement'>
  div {
    background-color: black;
  }
</style>

<script>
  // 输出 function CSSStyleSheet() { [native code] }
  console.log(document.querySelector('#linkElement').sheet.constructor);

  // 输出 function CSSStyleRule() { [native code] }
  console.log(document.querySelector('#styleElement').sheet.cssRules[0].constructor);
</script>

记住，选取引入样式表的元素（即 <link> 或 <style> ）与访问表示样式表自身的实际对象（CSSStyleSheet）是不同的。

CSSStyleSheet 对象

---

在上一小节中，我们知道了如何获取一个 CSSStyleSheet 对象的引用（例如 document.querySelector('#linkElement').sheet），而 document.styleSheets 则提供了一个包含 HTML 文档中所有样式表对象（即 CSSStyleSheet 对象）列表的访问方式，包括显式链接（即<link>）和内嵌（即<style>）。

<link id='linkElement' href='h.css' rel='stylesheet' type='text/css'>
<style id='styleElement'>
  div {
    background-color: black;
  }
</style>

<script>
  console.log(document.styleSheets.length); // 2
  console.log(document.styleSheets[0]); // <link>
  console.log(document.styleSheets[1]); // <style>
</script>

我们可以将 CSSStyleSheet 对象所拥有的属性和方法打印出来看看：

console.log(document.styleSheets[0]); // <link>
console.log(document.styleSheets[1]); // <style>

// <link>
cssRules: null
disabled: false
href: "file:///C:/Users/wwwy/Desktop/h.css"
media: MediaList
ownerNode: link#linkElement
ownerRule: null
parentStyleSheet: null
rules: null
title: null
type: "text/css"

// <style>
cssRules: CSSRuleList
disabled: false
href: null
media: MediaList
ownerNode: style#styleElement
ownerRule: null
parentStyleSheet: null
rules: CSSRuleList
title: null
type: "text/css"

我们对比后发现，内联样式表和外部引入的样式表是有区别的，最主要的区别就是内联样式表能用 cssRules 属性获取具体的 css 样式代码，继而能对它们进行操作，而外部引入的样式表则不行，仔细想想也有一定道理，毕竟外部的文件，我们怎么能随意对它们进行操作呢？接下去介绍几个重要的属性：

1. disabled： 表示样式表是否被禁用的布尔值
2. cssRules： 样式表中包含的样式规则的集合。IE 不支持这个属性，但有一个类似的 rules 属性

CSSStyleRule 概况

---

很显然，CSSStyleRule 才是本文的重点。CSSStyleRule 代表了样式表中所含的每条 CSS 规则。基本上，CSSStyleRule 即附加到某个选择器的 CSS 属性与值的接口。

<style id='styleElement'>
  div {
    background-color: black;
    width: 100px;
    height: 100px;
  }
</style>

<script>
  var sSheet = document.querySelector('#styleElement').sheet;

  // 输出 div { background-color: black; width: 100px; height: 100px; }
  console.log(sSheet.cssRules[0].cssText);
</script>

我们来看看 CSSStyleRule有哪些属性和方法：

<style id='styleElement'>
  div {
    background-color: black;
    width: 100px;
    height: 100px;
  }
</style>

<script>
  var sSheet = document.querySelector('#styleElement').sheet;

  console.log(sSheet.cssRules[0]);

  // cssText: "div { background-color: black; width: 100px; height: 100px; }"
  // parentRule: null
  // parentStyleSheet: CSSStyleSheet
  // selectorText: "div"
  // style: CSSStyleDeclaration
  // type: 1
</script>

CSSStyleRule之操作样式

---

当然，对于开发人员来说，如何用 CSSStyleRule 来获取和操作样式才是最重要的。

• 使用 insertRule() 和 deleteRule() 来插入与删除样式表中的 CSS 规则

insertRule() 和 deleteRule() 方法提供了以编程方式操作样式表中 CSS 规则的能力。

<style id='styleElement'>
  div {
    background-color: black;
    width: 100px;
    height: 100px;
  }
</style>

<script>
  var sSheet = document.querySelector('#styleElement').sheet;

  // 输出 div { background-color: black; width: 100px; height: 100px; }
  console.log(sSheet.cssRules[0].cssText);

  // 在行内样式表中索引0的位置添加新规则
  // 原来该位置的行内样式被移到了索引为1的位置
  sSheet.insertRule('p{color:red}', 0);

  console.log(sSheet.cssRules.length); // 2

  // 输出 p { color: red; }
  console.log(sSheet.cssRules[0].cssText);

  // 删除添加的规则
  sSheet.deleteRule(0);

  console.log(sSheet.cssRules.length); // 1

  // 输出 div { background-color: black; width: 100px; height: 100px; }
  console.log(sSheet.cssRules[0].cssText);
</script>

• 使用 .style 属性修改 CSSStyleRule 的值

正如我们有 .style 属性用于操作元素节点的内联样式，我们在 CSSStyleRule 对象上也有 .style 属性编排了在样式表上做相同的操作。

<style id='styleElement'>
  div {
    background-color: black;
    width: 100px;
    height: 100px;
  }
</style>

<script>
  var sSheet = document.querySelector('#styleElement').sheet;

  sSheet.cssRules[0].style.width = '200px';

  // 输出 div { background-color: black; width: 200px; height: 100px; }
  console.log(sSheet.cssRules[0].cssText);
</script>

• 创建新的内联样式表

要在 HTML 页面加载完毕后打造一个新的样式表，我们只能创建一个新的 节点。

var styleElem = document.createElement('style');
styleElem.innerHTML = 'body{color:red}';
document.querySelector('head').appendChild(styleElem);

• 以编程方式添加外部样式表到 HTML 文档

要以编程方式添加 CSS 文件到 HTML 文档，你需要创建一个 <link> 元素节点，给它合适的属性值，然后将它添加到 DOM 树。

var linkElem = document.createElement('link');
linkElem.setAttribute('rel', 'stylesheet');
linkElem.setAttribute('type', 'text/css');
linkElem.setAttribute('id', 'linkElement');
linkElem.setAttribute('href', '//..');

document.head.appendChild(linkElem);

---

本文参考文献：

1. 《Javascript高级程序设计》
2. 《DOM 启蒙》