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

У меня есть тег стиля со свойствами 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.info(style.sheet); //Display an object with Css rules

// Try to clone
var styleClone = style.cloneNode(true);
console.info(styleClone.sheet); //Display null !

Я ожидаю, что styleClone.sheet будет равно style.sheet

javascript html css dom

15.05.2019 21:16

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

917

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

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

    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;

Вставьте этот код в скрипт и загрузите его через в процессе или как хотите.

Это не сработает, мне нужен клон с лист.cssПравила элемента оригинальный (стиль)

— 16.05.2019 00:16

15.05.2019 21:49

Ответ принят как подходящий

Клонированный узел не получает собственного свойства 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.info(style.sheet); //Display an object with Css rules

// Try to clone
var styleClone = style.cloneNode(true);
console.info(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)
}

Глубокий клон должен иметь те же свойства, что и оригинал. Я не понимаю, почему он не содержит объект лист! Пока делаю как вы предложили с петлей на оригинале Спасибо !

— 16.05.2019 15:48

15.05.2019 21:58