javascript - 如何从使用 insertRule 添加的样式中检索 css 文本？

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 {背景颜色:红色}
p {颜色:白色}

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>