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

Z时代
2024-01-10
分类：问答

我不知道我在哪里错了：/。当我运行这段代码时，我得到的只是一个空白元素。我似乎无法让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>

回答：

这有点令人困惑，但是您的代码确实可以工作，只是您看不到返回的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>