使用CSS添加CSS？
有没有办法将javascript文件中的字符串中的css添加到使用javascript的文档的开头？
假设我们有一个网页，其中包含一个灯箱脚本，该脚本需要一个css文件才能运行。
现在，添加此css文件<link>将使css文件下载，即使对于未启用js的用户也是如此。
我知道我可以使用脚本动态加载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);
}
问题答案：
当您尝试<head>使用JavaScript
向其中添加CSS字符串时？将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" />
您只需在URL中对CSS字符串进行编码并将其添加为HREF属性，就可以在JavaScript中创建它。比所有<style>元素或直接访问样式表的古怪要简单得多。
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操作，并且只需要一个元素。
-
问题内容： 如何使用Javascript 添加CSS规则（例如）？ 问题答案： 您也可以使用DOM Level 2 CSS接口（MDN）执行此操作： …（除了（自然地）IE8和更早版本以外的所有版本），它使用自己的边际差异措辞： 与createElement-set- innerHTML方法相比，此方法具有理论上的优势，因为您不必担心在innerHTML中放置特殊的HTML字符，但实际上，样式元素
-
我已将这些字体样式添加到我的页面 如何使用css将它们添加到我的页面中，以便我的css中没有这些外部链接 我试过这个 但在我的控制台（我使用Mlozilla）中 可下载字体：被消毒剂拒绝 在Chrome错误说： 无法解码下载的字体：https://fonts.googleapis.com/css?family=Roboto:400，700700Italic，400italic 然后我下载了与Rob
-
问题内容： 如何使用 CSS 属性添加 HTML 实体？ 使用这样的东西只会打印到屏幕上，而不是不间断的空间： 问题答案： 您必须使用转义的unicode： 喜欢
-
问题内容： 我正在创建一个popupwindow，我想向该popupwindow中添加一个css文件，下面是popupwindow的代码。我有创建一个popupwindow的JavaScript。 现在，我想向该popupwindow中添加一个CSS文件。我尝试了类似的东西 但不起作用。 谢谢 问题答案： 这应该工作。
-
问题内容： 可以说我有这段： 在此段中加双引号的CSS代码是什么？（因此它将呈现“这是我的段落”） 问题答案： 使用 伪元素 ：
-
问题内容： 现在，我正在通过jquery加载iframe： 我有一个自定义样式表，希望将其应用于该页面。iframe中的页面不在同一域中，这就是为什么它很棘手的原因。我找到了允许您添加单个标签但不能添加整个样式表的解决方案。 编辑： 有问题的页面通过Mobile Safari 加载，因此跨域策略不适用。 问题答案： 基于解决方案您已经找到了如何将CSS应用于iframe？： 或更多jqueryis