Как извлечь текст CSS из стиля, добавленного с помощью insertRule?

Question

У меня есть тег, содержимое которого было добавлено динамически с помощью функции insertRule . Я хотел бы получить текстовое содержимое соответствующего стиля

Я пробовал document.getElementById('style').innerHTML и document.getElementById('style').text, но они возвращают пустую строку

// Add style a tag to head
var style = document.createElement("style");
style.id = "style",
style.type = "text/css",
document.head.appendChild(style);
var sheet = style.sheet;
// Insert some stylesheet rules
sheet.insertRule("p {background-color: red}", sheet.length);
sheet.insertRule("p {color: white}", sheet.length);
// Try to retrieve the css text
document.getElementById('style').innerHTML; // returns ""
document.getElementById('style').text; // returns undefined 

Я ожидаю, что текст CSS присутствует в таблице стилей. Например, вышеприведенный стиль должен возвращать p {background-color: red} p {color: white}

Answer 1

var style = document.createElement("style");
    style.id = "style",
    style.type = "text/css",
    document.head.appendChild(style);
    var sheet = style.sheet;
    // Insert some stylesheet rules
    sheet.insertRule("p {background-color: red}", sheet.length);
    sheet.insertRule("p {color: white}", sheet.length);
    sheet.insertRule("div {color: green}", sheet.length);

    function getRule(){
      var cssFullText = "";
      [...sheet.cssRules].forEach(({cssText})=> cssFullText += `${cssText} `);
      console.log(cssFullText)
    }

<p>Test line</p>
    <p>Test line</p>
    <button onClick="getRule()">Get css HTML</button>

Answer 2

Попробуй вот так.Я добавил образец фрагмента, чтобы получить все теги стиля.

function addStyle(styles) { 
              
  /* Create style document */ 
  var css = document.createElement('style'); 
  css.type = 'text/css'; 

  if (css.styleSheet)  
  css.styleSheet.cssText = styles; 
  else  
  css.appendChild(document.createTextNode(styles)); 

  /* Append style to the tag name */ 
  document.getElementsByTagName("head")[0].appendChild(css); 
  
  // Try to retrieve the css text
  var styleTag = document.getElementsByTagName('style');
  for(var i=0; i<styleTag.length;i++){
    console.log(styleTag[i].innerHTML); // returns
  }
} 

/* Set the style */ 
var styles = 'h1 { color: green }'; 
styles += ' body { text-align: center }'; 

/* Function call */ 
window.onload = function() { addStyle(styles) }; 

Answer 3

Вы почти у цели. Таблица стилей, очевидно, стала частью объекта document.

Таким образом, document.styleSheets вернет список (массив) таблиц стилей, прикрепленных к документу.

Доступ к каждой таблице стилей можно получить, пройдя по ней.

document.styleSheets[0].cssRules даст вам массив cssRules таблицы стилей.

Опять же, вы можете просмотреть cssRules, чтобы получить доступ к написанным там правилам.

Примечание:

Firefox генерирует ошибку SecurityError: The operation is insecure. при попытке доступа к cssRules.

Подробнее об интерфейсе CSSStyleSheet.