Как клонировать элемент Style с его cssRules? - PullRequest
Новая
       1

Как клонировать элемент Style с его cssRules?

1 голос
/ 15 мая 2019

У меня есть тег стиля со свойствами 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

Ответы [ 2 ]

0 голосов
/ 15 мая 2019

Клонированный узел не получает свое собственное свойство 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)
}
0 голосов
/ 15 мая 2019

Я не знаю, почему вы пытаетесь сделать это таким образом. Мой пример гораздо проще и банальнее, но он делает то, что вы просите (если я правильно понял). 

    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 или любым другим способом.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...