如何正确使用CSSStyleSheet.insertRule()？

Question

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

Answer 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 的自定义样式表并且在调试时它们在检查器中显示为空样式表时，通常会注意到这一点。

Answer 2

此版本基于 Awal 的回答和 Totally Pwn CSS with Javascript 来自 web archive。 id 参数对于使用 getElementById 访问样式表很有用，media 参数是可选的，默认为 'screen'。我要退回 styleSheet.sheet，这只是我的偏好。

function createStyleSheet (id, media) {
    var el   = document.createElement('style');
    // WebKit hack
    el.appendChild(document.createTextNode(''));
    el.type  = 'text/css';
    el.rel   = 'stylesheet';
    el.media = media || 'screen';
    el.id    = id;
    document.head.appendChild(el);
    return el.sheet;
}

如何正确使用CSSStyleSheet.insertRule()？

How to use CSSStyleSheet.insertRule() properly?

javascript

css

stylesheet