gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 19:26:04 24 4
gpt4 key购买 nike

我有一个样式标签,其 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

最佳答案

克隆的节点没有得到自己的 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)
}

关于javascript - 如何使用其 cssRules 克隆 Style 元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56156252/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com