insertRule与addRule – 学习画板

首页 » DOM » insertRule与addRule

insertRule与addRule

要向现有的样式表中添加新规则,需要使用insertRule()方法。这个方法接受两个参数:规则文本和表示在那里插入规则的索引。下面是一个例子:

function getStyleSheet(element) {
    return element.sheet || element.styleSheet;
}
var link = document.getElementsByTagName("link")[0];
var sheet = getStyleSheet(link);
sheet.insertRule("body { background-color: silver }", 0);  //DOM方法

这个例子插入的规则会改变元素的背景颜色。插入的规则将称为样式表中的第一条规则(插入到了位置0)——规则的次序在确定层叠之后应用到文档的规则至关重要。Firefox、Safari、Opera和Chrome都支持insertRule()方法。

IE支持一个类似的方法,名叫addRule,也接受两必选参数:选择符文本和CSS样式信息;一个可选参数:插入规则的位置。在IE中插入与前面例子相同的规则,可使用如下代码:

sheet.addRule("body", "background-color: silver", 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", "background-color: silver", 0);
此文章发表在 DOM. 将 固定链接 加入收藏.