javascript - 用Javascript将CSS插入头部

使用以下脚本，我包含文本，并在运行时将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>');
})();

最佳答案

您忘记添加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>');
})();