用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议/添加/删除，但我没有看到任何过分复杂的东西，已经很好的跨浏览器。 祝你好运！
编辑 ：作为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不允许设置innerText ， innerHTML或在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;");
