我有一个带有insertRule函数添加的css属性的样式标签。
我尝试了Element.cloneNode(tree)
,但其中不包含cssRules
// Add a style tag to head
var style = document.createElement("style");
style.id = "style",
style.type = "text/css",
document.head.appendChild(style);
// Insert some stylesheet rules
var sheet = style.sheet;
sheet.insertRule("p {background-color: red}", sheet.cssRules.length);
sheet.insertRule("p {color: white}", sheet.cssRules.length);
console.log(style.sheet); //Display an object with Css rules
// Try to clone
var styleClone = style.cloneNode(true);
console.log(styleClone.sheet); //Display null !
我希望
styleClone.sheet
等于style.sheet
最佳答案
克隆的节点在添加为文档sheet
或CSSStyleSheet
的一部分之前,不会获得自己的<head>
属性(或<body>
对象)。
我们可以将styleClone
变量赋予其自己的sheet
,方法是将其插入到头部,就像代码对style
变量所做的一样!
这就是我得到的
// Add style a tag to head
var style = document.createElement("style");
style.id = "style",
style.type = "text/css",
document.head.appendChild(style);
// Insert some stylesheet rules
var sheet = style.sheet;
sheet.insertRule("p {background-color: red}", sheet.cssRules.length);
sheet.insertRule("p {color: white}", sheet.cssRules.length);
console.log(style.sheet); //Display an object with Css rules
// Try to clone
var styleClone = style.cloneNode(true);
console.log(styleClone.sheet); //Display null !
// Added
document.head.appendChild(styleClone);
// Copy all rules from style variable
for (var i = 0; i < style.sheet.rules.length; i++) {
styleClone.sheet.insertRule(style.sheet.rules[i].cssText)
}