要向现有的样式表中添加新规则,需要使用insertRule()方法。这个方法接受两个参数:规则文本和表示在那里插入规则的索引。下面是一个例子:
sheet.insertRule("body { ">, 0); //DOM方法
这个例子插入的规则会改变元素的背景颜色。插入的规则将称为样式表中的第一条规则(插入到了位置0)——规则的次序在确定层叠之后应用到文档的规则至关重要。Firefox、Safari、Opera和Chrome都支持insertRule()方法。
IE支持一个类似的方法,名叫addRule,也接受两必选参数:选择符文本和CSS样式信息;一个可选参数:插入规则的位置。在IE中插入与前面例子相同的规则,可使用如下代码:
sheet.addRule("body", "">, 0); //仅对IE有效
有关这个方法规定中说,最多可以使用addRule()添加4095条样式规则。超出这个上线的调用将会导致错误。
要以跨浏览器的方式向样式表中插入规则,可以使用下面的函数。这个函数接受4个参数:要向其中添加规则的样式表以及与addRule()相同的3个参数,如下所示:
function insertRule(sheet, selectorText, cssText, position) {
if (sheet.insertRule) {
sheet.insertRule(selectorText + "{" + cssText + "}", position);
} else if (sheet.addRule) {
sheet.addRule(selectorText, cssText, poistion);
}
}
insertRule(document.styleSheets[0], "body", "">, 0);