动态加载css的方法

我很早就知道，您可以使用 addRule() 和 insertRule() 动态地将样式规则加载到页面中，具体取决于它是 IE 还是兼容标准的浏览器。但我刚刚发现，在 Chrome 上，一种更通用（对我来说）的方法效果很好：创建一个 style 元素，用任意 css 文本向其添加一个 texnode（它可以是 css 文件的内容），然后将其添加到文档中。您还可以通过从文档中删除该样式节点来删除它。例如，当我向它发送字符串“div {background-color: red; }\n p {font-family: georgia; }”时，该函数工作正常：

var applyCss = function (cssString) {
  var scriptNode = document.createElement('style');
  scriptNode.appendChild(document.createTextNode(cssString));
  document.getElementsByTagName('head')[0].appendChild(scriptNode);
  return scriptNode;
};

虽然我了解在某些情况下基于规则执行此操作的好处，但这种快捷方式（类似于使用innerHTML，而不是使用 DOM 技术逐部分构建元素）在很多情况下对我特别有用，如果我可以指望它能发挥作用。

是否始终得到支持？这种方法有什么缺点吗？我特别好奇，因为我从未在任何地方看到过这种方法的建议。

您不会在任何地方看到这种方法被提及或建议的主要原因是因为它是不必要的。而不是不断尝试编辑style元素，您应该有一组动态添加和从元素中删除的类。

根据我的经验，动态添加带有文本的样式元素可以跨浏览器工作。到目前为止，我还没有找到一个不能使用以下内容的浏览器：

//jQuery for brevity
$('<style>p{margin:0}</style>').appendTo('head');

The only我曾经需要这个的情况是添加一大组非常特定的样式以与书签一起使用。否则，我将动态添加样式表：

$('<link rel="stylesheet" type="text/css" href="path/to/stylesheet.css />').appendTo('head');

但实际上，样式表应该已经存在于 HTML 中。