Question

52

How to use CSSStyleSheet.insertRule() properly?

rated 0 times [ 53] [ 1] / answers: 1 / hits: 21652 / 9 Years ago, sun, march 8, 2015, 12:00:00

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>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

kinsley

Add To Favorites

Follow

Total Points: 352

Total Questions: 84

Total Answers: 94

Location: Denmark

Member since Tue, Jul 19, 2022

2 Years ago

answered 9 Years ago harleyaleenag · Accepted Answer

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>

Run the above snippet, and you can see that the CSS rule does apply. And the cssRules property changes as well in the console.

This is often noted when browser extensions generate custom style-sheets appended to the DOM, and while debugging they appear as empty style-sheets in the inspector.