Add Rules to Stylesheets with JavaScript - insertRule not working
<p>I'm learning about using <strong>JavaScript</strong> to make the <strong>CSS</strong> more dynamic but for some reason, this code here won't work. I'm developing inside <strong>Visual Studio</strong>, the IntelliSense does not even show me the method insertRule. As a basis I use this documentation for learning:</p>

<p><a href="https://davidwalsh.name/add-rules-stylesheets" rel="nofollow noreferrer">https://davidwalsh.name/add-rules-stylesheets</a></p>

<p><a href="https://www.w3.org/wiki/Dynamic_style_-_manipulating_CSS_with_JavaScript" rel="nofollow noreferrer">https://www.w3.org/wiki/Dynamic_style_-_manipulating_CSS_with_JavaScript</a></p>

<p>I do the same as written there but somehow I can't use the function on the object.</p>

<pre><code>window.onload = function() {
    var bar = newSheet();
    bar.insertRule("header { float: left; opacity: 0.8; }", 1);  
};

function newSheet() {
    // Create the &lt;style&gt; tag
    var style = document.createElement("style");
    //WebKit Hack
    style.appendChild(document.createTextNode(""));
    // Add the &lt;style&gt; element to the page
    document.head.appendChild(style);

    return style.sheet;
};
</code></pre>