用JavaScript添加CSS到<head>?

有没有办法从javascript文件中的string中添加CSS到JavaScript文档的头部?

比方说,我们有一个网页,其中有一个灯箱脚本,这个脚本需要一个CSS文件的function。

现在使用<link>添加这个css文件,即使没有启用js的人也可以下载css文件。

我知道我可以dynamic加载脚本的CSS文件,但这也意味着会有2个http请求,并且在文件中几乎没有css的情况下,我觉得这是低效的。

所以我想,如果你可以把你在css文件中的css放到脚本中,让脚本parsingcss并将它添加到头部,或者甚至更好的是让脚本直接将css添加到文档的<head>

但是,我没有发现任何networking上,这表明这是可能的,所以是否有可能添加CSS与js的头?

编辑+解决scheme:

我编辑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); } 

如果你不想依赖一个javascript库,你可以使用document.write()来将所需的CSS包装在style标签中,直接放到文档head

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

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

还有其他解决scheme已被build议/添加/删除,但我没有看到任何过分复杂的东西,已经很好的跨浏览器。 祝你好运!

http://jsbin.com/oqede3/edit

编辑 :作为Atspulgs评论build议,你可以实现没有jQuery使用querySelector相同:

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

较老的答案在下面。


您可以使用jQuery库来select您的head元素并将HTML附加到它,如下所示:

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

你可以在这里find这个问题的完整教程

一个简单的非jQuery解决scheme,尽pipe对于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]); 

看来IE不允许设置innerTextinnerHTML或在style元素上使用appendChild 。 这是一个错误报告 ,这表明了这一点,虽然我认为它不正确地确定问题。 上面的解决方法是从错误报告的评论,并已在IE6和IE9testing。

无论你使用这个,document.write还是更复杂的解决scheme都将取决于你的情况。

这是一个在所有主stream浏览器中dynamic创buildCSS规则的函数。 createCssRule一个select器(例如“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;");