将CSS插入头部的Javascript

Question

使用以下脚本我在运行时包含文本并将css插入到我的页面头部。但是，虽然插入的css不会产生影响。为什么？

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

Answer 1

您忘记添加rel="stylesheet"，这对于声明样式表<link>标记很重要。

以下是设置rel属性的更新代码：

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