如何正确使用CSSStyleSheet.insertRule（）？

小编典典

如何正确使用CSSStyleSheet.insertRule（）？

css

我不知道我在哪里错了：/。当我运行这段代码时，我得到的只是一个空白元素。我似乎无法让insertRule方法执行任何操作（甚至不会产生错误）。我想念什么吗？

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
</head>
<body>
<script>
    var sheet = (function() {
        // Create the <style> tag
        var style = document.createElement("style");

        // WebKit hack
        style.appendChild(document.createTextNode(""));

        // Add the <style> element to the page
        document.head.appendChild(style);

        return style.sheet;
    })();
    sheet.insertRule("\
        #gridContainer {\
            width: 100%;\
            height: 100%;\
        }\
    ", 0);
</script>
</body>
</html>

阅读 1625

2020-05-16

共1个答案

小编典典

这有点令人困惑，但是您的代码确实可以工作，只是您看不到返回的XML树中插入的规则。

为了验证您的代码是否有效，您可以执行两个测试：

var style = (function() {

    // Create the <style> tag

    var style = document.createElement("style");



    // WebKit hack

    style.appendChild(document.createTextNode(""));



    // Add the <style> element to the page

    document.head.appendChild(style);



    console.log(style.sheet.cssRules); // length is 0, and no rules



    return style;

})();

style.sheet.insertRule('.foo{color:red;}', 0);

console.log(style.sheet.cssRules); // length is 1, rule added


<p class="foo">

  I am some text

</p>

运行上面的代码片段，您可以看到CSS规则确实适用。并且cssRules属性也在控制台中更改。

当浏览器扩展生成附加到DOM的自定义样式表时，以及在调试时它们在检查器中显示为空样式表时，通常会注意到这一点。

2020-05-16