CODEWITHSUNDEEP
javascript
Prometheus
Prometheus

Reputation: 33655

Javascript inserting CSS into head

Using the following script I include text and insert css into my page head at run time. However, although the css in inserted it does not take affect. Why? 

(function () {

    var styleEl = document.createElement("link");
    styleEl.type = "text/css";
    styleEl.href = "/static/css/widgets.css";
    //document.getElementsByTagName('head')[0].appendChild(styleEl);
    document.head.appendChild(styleEl);


    var foo = "Goodbye World!";
    document.write("<p class='example-widget-container'>Inside our anomymous function foo means '" + foo + '".</p>');
})();

Upvotes: 0

Views: 65

Answers (1)

Adrian Mitev
Adrian Mitev

Reputation: 4752

You forgot to add rel="stylesheet" which is important for declaring a stylesheet <link> tag.

Here is the updated code with setting of the rel property:

(function () {
    var styleEl = document.createElement("link");
    styleEl.type = "text/css";
    styleEl.href = "/static/css/widgets.css";
    style.rel = "stylesheet";

    //document.getElementsByTagName('head')[0].appendChild(styleEl);
    document.head.appendChild(styleEl);


    var foo = "Goodbye World!";
    document.write("<p class='example-widget-container'>Inside our anomymous function foo means '" + foo + '".</p>');
})();

Upvotes: 2

Related Questions