时间戳

首页 > 解决方案 > 如何使用其 cssRules 克隆 Style 元素？

javascript - 如何使用其 cssRules 克隆 Style 元素？

问题描述

我有一个带有 CSS 属性的样式标签，其中添加了insertRule函数。

我试过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

标签： javascripthtmlcssdom

解决方案

克隆节点在添加到文档的一部分之前不会获得自己的sheet属性（或对象）或CSSStyleSheet<head><body>

我们可以通过将变量插入头部来赋予styleClone它自己的变量，就像代码对变量所做的那样！sheetstyle

这是我得到的

// 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)
}

推荐阅读