极客观点
项目管理
HarmonyOS
有没有办法将 javascript 文件中的字符串中的 css 添加到带有 javascript 的文档的头部？
假设我们有一个网页，其中有一个灯箱脚本，这个脚本需要一个 css 文件才能运行。
现在添加这个带有 <link> 的 css 文件将使 css 文件下载，即使对于没有启用 js 的人也是如此。
我知道我可以使用脚本动态加载 css 文件，但这也意味着会有 2 个 http 请求，并且在文件中几乎没有 css 的情况下，我发现效率很低。
所以我想，如果你可以将你在 css 文件中的 css 放入脚本，让脚本解析 css 并将其添加到头部，或者甚至更好的是让脚本直接将 css 添加到文档的 <head> 。
但是我在网上没有找到任何提示这是可能的，那么是否可以用js在头部添加css呢？
编辑+解决方案：
我编辑了 roryf 的答案以跨浏览器工作（IE5 除外）
Java脚本：
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);
}
原文由 Timo Huovinen 发布，翻译遵循 CC BY-SA 4.0 许可协议
当您尝试使用 JavaScript 添加一串 CSS 到
<head>时？将一串 CSS 注入页面，使用<link>元素比使用<style>元素更容易做到这一点。以下将
p { color: green; }规则添加到页面。您可以简单地通过 URL 编码您的 CSS 字符串并将其添加到
HREF属性来在 JavaScript 中创建它。比<style>元素或直接访问样式表的所有怪癖要简单得多。这将在 IE 5.5 向上工作
您标记的解决方案将起作用，但此解决方案需要较少的 dom 操作并且只需要一个元素。