javascript - How to use CSSStyleSheet.insertRule() properly?

Question

Welcome To Ask or Share your Answers For Others

javascript - How to use CSSStyleSheet.insertRule() properly?

posted Oct 17, 2021 in Technique[技术] by 深蓝 (71.8m points)

javascript - How to use CSSStyleSheet.insertRule() properly?

I can't figure out where I'm going wrong here :/. When I run this code, all I get is a blank element. I can't seem to get the insertRule method to do anything (not even produce an error). Am I missing something?

<!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>

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-17T03:07:46+0000

It is slightly confusing but your code does actually work, it is just that you can't see the inserted rules in the XML tree returned.

To verify that your code works, there are two tests you can do:

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>

Categories

javascript - How to use CSSStyleSheet.insertRule() properly?

javascript - How to use CSSStyleSheet.insertRule() properly?

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags