有没有办法将 javascript 文件中的字符串中的 css 添加到带有 javascript 的文档的头部？
假设我们有一个网页，其中有一个灯箱脚本，这个脚本需要一个 css 文件才能运行。
现在用 <link> 添加这个 css 文件即使没有启用 js 的人也会下载 css 文件。
我知道我可以使用脚本动态加载 css 文件，但这也意味着会有 2 个 http 请求，并且在文件中几乎没有 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);
}
最佳答案
编辑:正如 Atspulgs 的评论所建议的那样，您可以在没有 jQuery 的情况下使用 querySelector 实现同样的效果。 :
document.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
关于javascript - 使用 JavaScript 将 CSS 添加到 <head>？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3922139/