Javascript inserting CSS into head

Question

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>');
})();

Don't use document.write! See the warning in the spec. Use DOM methods instead. — Oriol
– Oriol, Commented Mar 30, 2014 at 19:35
@Adrian Mitev that worked thank you! Would you like to add an answer. — Prometheus
– Prometheus, Commented Mar 30, 2014 at 19:39

Sumner Evans · Accepted Answer · 2014-03-30 19:45:23Z

2

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>');
})();

edited Mar 30, 2014 at 19:45

Sumner Evans

9,2055 gold badges32 silver badges48 bronze badges

answered Mar 30, 2014 at 19:43

Adrian Mitev

4,7624 gold badges33 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Javascript inserting CSS into head

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related