多数情况下,使用 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 层叠的效果,删
除规则时要慎重。