代码之家 › 专栏 › 技术社区 › Timo Huovinen

用javascript将css添加到<head>

css html javascript

Timo Huovinen · 技术社区 · 15 年前

有没有一种方法可以将CSS从javascript文件中的字符串添加到带有javascript的文档头上?

假设我们有一个网页,它有一个lightbox脚本,这个脚本需要一个CSS文件才能运行。

现在添加此CSS文件 <link> 即使对于没有启用JS的人,也会下载CSS文件。

我知道我可以用脚本动态加载CSS文件,但这也意味着将有2个HTTP请求,并且在文件中没有CSS或没有CSS的情况下,我发现这样做效率很低。

所以我想,如果你能把你在CSS文件中拥有的CSS放到脚本中,让脚本解析CSS并将其添加到头部,或者更好的方法是让脚本直接将CSS添加到 <head> 文件。

但是我在网上没有发现任何东西表明这是可能的,所以有没有可能用JS将CSS添加到头部?

编辑+解决方案:

我编辑了Roryf对跨浏览器工作的回答(IE5除外)

Javascript:

 function addcss(css){
    var head = document.getElementsByTagName('head')[0];
    var s = document.createElement('style');
    s.setAttribute('type', 'text/css');
    if (s.styleSheet) {   // IE
        s.styleSheet.cssText = css;
    } else {                // the world
        s.appendChild(document.createTextNode(css));
    }
    head.appendChild(s);
 }

6 回复 | 直到 7 年前

moefinley 7 年前

当您试图向 <head> 使用javascript? 在页面中插入一个CSS字符串,使用 <link> 元素 <style> 元素。

下面添加了 p { color: green; } 页面规则。

<link rel="stylesheet" type="text/css" href="data:text/css;charset=UTF-8,p%20%7B%20color%3A%20green%3B%20%7D" />

您可以在javascript中创建它,只需通过URL编码您的CSS字符串并将其添加到 HREF 属性。比所有的怪癖简单得多 <风格& GT; 元素或直接访问样式表。

var linkElement = this.document.createElement('link');
linkElement.setAttribute('rel', 'stylesheet');
linkElement.setAttribute('type', 'text/css');
linkElement.setAttribute('href', 'data:text/css;charset=UTF-8,' + encodeURIComponent(myStringOfstyles));

这将在IE 5.5以上的版本中工作

您标记的解决方案可以工作,但此解决方案只需要较少的DOM操作和单个元素。

thomaux 9 年前

编辑 :正如atspulgs注释所建议的,您可以在不使用jquery的情况下使用 querySelector :

document.querySelector('head').innerHTML += '<link rel="stylesheet" href="styles.css" type="text/css"/>';

下面是更旧的答案。

你可以用 jQuery 库以如下方式选择head元素并将html附加到其中:

$('head').append('<link rel="stylesheet" href="style2.css" type="text/css" />');

您可以找到这个问题的完整教程。 here

Jeriko 15 年前

如果不想依赖javascript库,可以使用 document.write() 吐出所需的CSS,包装在 style 标签,直接进入文档 head :

<head>
  <script type="text/javascript">
    document.write("<style>body { background-color:#000 }</style>");
  </script>
  # other stuff..
</head>

这样可以避免触发额外的HTTP请求。

还有其他的解决方案已经被建议/添加/删除,但我不认为过度简化已经可以跨浏览器正常工作的东西有什么意义。祝你好运!

http://jsbin.com/oqede3/edit

roryf 15 年前

一个简单的非jquery解决方案,尽管有点针对IE的黑客攻击:

var css = ".lightbox { width: 400px; height: 400px; border: 1px solid #333}";

var htmlDiv = document.createElement('div');
htmlDiv.innerHTML = '<p>foo</p><style>' + css + '</style>';
document.getElementsByTagName('head')[0].appendChild(htmlDiv.childNodes[1]);

似乎不允许设置 innerText , innerHTML 或使用 appendChild 在 style 元素。这里是一个 bug report 这说明了这一点,尽管我认为它错误地识别了问题。上面的解决方法来自对错误报告的评论,并且已经在IE6和IE9中进行了测试。

无论您使用document.write还是更复杂的解决方案,都将真正取决于您的情况。

Tim Down 15 年前

这是一个在所有主要浏览器中动态创建CSS规则的函数。 createCssRule 采用选择器(例如“p.purpletext”)、规则(例如“color:purple;”)和可选的 Document (默认使用当前文档):

var addRule;

if (typeof document.styleSheets != "undefined" && document.styleSheets) {
    addRule = function(selector, rule) {
        var styleSheets = document.styleSheets, styleSheet;
        if (styleSheets && styleSheets.length) {
            styleSheet = styleSheets[styleSheets.length - 1];
            if (styleSheet.addRule) {
                styleSheet.addRule(selector, rule)
            } else if (typeof styleSheet.cssText == "string") {
                styleSheet.cssText = selector + " {" + rule + "}";
            } else if (styleSheet.insertRule && styleSheet.cssRules) {
                styleSheet.insertRule(selector + " {" + rule + "}", styleSheet.cssRules.length);
            }
        }
    }
} else {
    addRule = function(selector, rule, el, doc) {
        el.appendChild(doc.createTextNode(selector + " {" + rule + "}"));
    };
}

function createCssRule(selector, rule, doc) {
    doc = doc || document;
    var head = doc.getElementsByTagName("head")[0];
    if (head && addRule) {
        var styleEl = doc.createElement("style");
        styleEl.type = "text/css";
        styleEl.media = "screen";
        head.appendChild(styleEl);
        addRule(selector, rule, styleEl, doc);
        styleEl = null;
    }
};

createCssRule("body", "background-color: purple;");

Ally 7 年前

这是一个简单的方法。

/**
 * Add css to the document
 * @param {string} css
 */
function addCssToDocument(css){
  var style = document.createElement('style')
  style.innerText = css
  document.head.appendChild(style)
}