Question

我有一个带有here函数的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

Answer 1

我不知道你为什么要那样做。我的示例更轻松，更平庸，但是它可以满足您的要求（如果我做对了）。

    var style = document.createElement("style");
    style.id = "style",
    style.type = "text/css",
    document.head.appendChild(style);
    // create the clone element
    var clone = document.createElement("style");
    clone.id = "clone",
    clone.type = "text/css",
    document.head.appendChild(clone);
    // set the original style as you want
    style.innerHTML = "p {color:red}";
    // copy the same content of style into clone
    clone.innerHTML = style.innerHTML;

将此代码插入脚本中，然后通过onload或您想要的任何方式加载。

Answer 2

克隆节点只有将其添加为文档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)
}

如何使用cssRules克隆Style元素？

2 个答案: