javascript基础学习系列二百五十三：创建规则和删除规则

多数情况下，使用 style 属性就可以实现操作样式规则的任务了。这个对象可以像每个元素上的
style 对象一样，用来读取或修改规则的样式。比如下面这个 CSS 规则:

   div.box {
      background-color: blue;
      width: 100px;
      height: 200px;
}

假设这条规则位于页面中的第一个样式表中，而且是该样式表中唯一一条 CSS 规则，则下列代码可 以获取它的所有信息:

let sheet = document.styleSheets[0];
let rules = sheet.cssRules || sheet.rules;
let rule = rules[0];
console.log(rule.selectorText);
console.log(rule.style.cssText);
console.log(rule.style.backgroundColor);
console.log(rule.style.width);
console.log(rule.style.height);
// 取得规则集合 // 取得第一条规则 // "div.box"
// 完整的 CSS 代码 // "blue"
// "100px"
// "200px"

使用这些接口，可以像确定元素 style 对象中包含的样式一样，确定一条样式规则的样式信息。 与元素的场景一样，也可以修改规则中的样式，如下所示:

let sheet = document.styleSheets[0];
let rules = sheet.cssRules || sheet.rules; // 取得规则集合 let rule = rules[0]; // 取得第一条规则 rule.style.backgroundColor = "red"

注意，这样修改规则会影响到页面上所有应用了该规则的元素。如果页面上有两个

元素有 "box"类，则这两个元素都会受到这个修改的影响。

2. 创建规则

DOM 规定，可以使用 insertRule()方法向样式表中添加新规则。这个方法接收两个参数:规则 的文本和表示插入位置的索引值。下面是一个例子:

sheet.insertRule("body{background-color:silver}",0); //使用DOM方法

这个例子插入了一条改变文档背景颜色的规则。这条规则是作为样式表的第一条规则(位置 0)插 入的，顺序对规则层叠是很重要的。
虽然可以这样添加规则，但随着要维护的规则增多，很快就会变得非常麻烦。这时候，更好的方式 是使用第 14 章介绍的动态样式加载技术。

3. 删除规则

支持从样式表中删除规则的 DOM 方法是 deleteRule()，它接收一个参数:要删除规则的索引。 要删除样式表中的第一条规则，可以这样做:
sheet.deleteRule(0); //使用DOM方法
与添加规则一样，删除规则并不是 Web 开发中常见的做法。考虑到可能影响 CSS 层叠的效果，删
除规则时要慎重。