CSSStyleSheet.insertRule()
CSSStyleSheet.insertRule()
方法用来给当前样式表插入新的样式规则(CSS rule),并且包含一些限制。
备注: 尽管 insertRule()
是 CSSStyleSheet
的一个方法,但它实际插入的地方是 CSSStyleSheet.cssRules
的内部 CSSRuleList
。
语法
stylesheet.insertRule(rule [, index])
参数
rule
-
一个包含了将要插入的规则的
DOMString
。规则字符串必须包含的内容取决于它的类型:- rule-sets 类型(普通带有选择器的规则)**,**需要选择器 (en-US)和样式声明;
- at-rules 类型(以
@
开头的规则,如@import, @media
等)**,**需要 at-identifier 和规则内容。
index
可选-
一个小于或等于
stylesheet.cssRules.length
的正整数,表示新插入的规则在CSSStyleSheet.cssRules
中的位置。默认值是0
。(在过去的实现中,这个参数是必需的,详情参见浏览器兼容性。)
返回值
新插入的规则在当前样式表规则列表中的索引。
限制
CSS 中存在一些直观和不是太直观能感受到的限制规则影响着某些样式规则能否被插入。违反这些规则可能会导致一些 DOM 异常(DOMException
)。
- 如果
index
>CSSRuleList.length
,该方法会中止并返回一个IndexSizeError
错误; - 如果
rule
由于一些 CSS 约束而不能被插入到index
0
,该方法会中止并返回一个HierarchyRequestError
错误; - 如果
rule
参数中包含超过一条样式规则,该方法会中止并返回一个SyntaxError
; - 如果尝试在一条普通规则后插入一条
@import
这种类型的规则,该方法会中止并返回一个HierarchyRequestError
错误; - 如果
rule
是@namespace
并且规则列表中有另外的@import
和/或@namespace
规则,该方法中止并返回一个InvalidStateError
错误;
示例
在样式表顶部插入新的规则
下面的代码片段将在样式表 myStyle
的顶部插入一条新规则:
js
myStyle.insertRule("#blanc { color: white }", 0);
实现一个添加样式表规则的函数
js
/**
* 在文档中添加一条样式表规则(这可能是动态改变 class 名的更好的实现方法,
* 使得 style 样式内容可以保留在真正的样式表中,以便添加额外的元素到 DOM 中)。
* 注意这里有必要声明一个数组,因为 ECMAScript 不保证对象按预想的顺序遍历,
* 并且 CSS 也是依赖于顺序的。
* 类型为数组的参数 decls 接受一个 JSON 编译的数组。
* @example
addStylesheetRules([
['h2', // 还接受第二个参数作为数组中的数组
['color', 'red'],
['background-color', 'green', true] // 'true' for !important rules
],
['.myClass',
['background-color', 'yellow']
]
]);
*/
function addStylesheetRules(decls) {
var style = document.createElement("style");
document.getElementsByTagName("head")[0].appendChild(style);
if (!window.createPopup) {
/* For Safari */
style.appendChild(document.createTextNode(""));
}
var s = document.styleSheets[document.styleSheets.length - 1];
for (var i = 0, dl = decls.length; i < dl; i++) {
var j = 1,
decl = decls[i],
selector = decl[0],
rulesStr = "";
if (Object.prototype.toString.call(decl[1][0]) === "[object Array]") {
decl = decl[1];
j = 0;
}
for (var rl = decl.length; j < rl; j++) {
var rule = decl[j];
rulesStr +=
rule[0] + ":" + rule[1] + (rule[2] ? " !important" : "") + ";\n";
}
if (s.insertRule) {
s.insertRule(selector + "{" + rulesStr + "}", s.cssRules.length);
} else {
/* IE */
s.addRule(selector, rulesStr, -1);
}
}
}
兼容补丁
以下补丁将会在 IE 5-8 中纠正提供给 insertRule()
的参数,使其标准化。to standardize them in Internet Explorer 5–8. 它通过一个函数对 insertRule()
进行补充,使得在参数传递给原生的 insertRule()
函数之前将其中的选择器从规则中分离出来。
(function(Sheet_proto){ var originalInsertRule = Sheet_proto.insertRule; if (originalInsertRule.length === 2){ // 2 个托管参数: (selector, rules) Sheet_proto.insertRule = function(selectorAndRule){ // 首先,从规则中分离选择器 a: for (var i=0, Len=selectorAndRule.length, isEscaped=0, newCharCode=0; i !== Len; ++i) { newCharCode = selectorAndRule.charCodeAt(i); if (!isEscaped && (newCharCode === 123)) { // 123 = "{".charCodeAt(0) // 其次,找到花括号 var openBracketPos = i, closeBracketPos = -1; for (; i !== Len; ++i) { newCharCode = selectorAndRule.charCodeAt(i); if (!isEscaped && (newCharCode === 125)) { // 125 = "}".charCodeAt(0) closeBracketPos = i; } isEscaped ^= newCharCode===92?1:isEscaped; // 92 = "\\".charCodeAt(0) } if (closeBracketPos === -1) break a; // No closing bracket was found! /*else*/ return originalInsertRule.call( this, // 想要改变的样式表 selectorAndRule.substring(0, openBracketPos), // 选择器 selectorAndRule.substring(closeBracketPos), // 规则 arguments[3] // 插入的索引 ); } // Works by if the char code is a backslash, then isEscaped // gets flipped (XOR-ed by 1), and if it is not a backslash // then isEscaped gets XORed by itself, zeroing it isEscaped ^= newCharCode===92?1:isEscaped; // 92 = "\\".charCodeAt(0) } // Else, there is no unescaped bracket return originalInsertRule.call(this, selectorAndRule, "", arguments[2]); }; } })(CSSStyleSheet.prototype);
规范
Specification |
---|
CSS Object Model (CSSOM) # dom-cssstylesheet-insertrule |
浏览器兼容性
BCD tables only load in the browser
传统浏览器支持
为了支持 Internet Explorer 8 和更早版本,请使用:addRule(selector, rule [, index]);
。例如:addRule('pre', 'font: 14px verdana'); // add rule at end
另外注意非标准的 removeRule()
和 .rules
方法分别用 deleteRule()
和.cssRules
代替。