动态加载CSS的方法

Question

我早已知道可以使用addRule()和insertRule()在页面中动态加载样式规则，具体取决于是IE还是符合标准的浏览器。但我刚刚发现，在Chrome上，一个更为通用且对我来说更有用的方法也能正常工作：创建一个样式元素，添加一个文本节点并带有任意的CSS文本（它可以是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技术逐个构建元素）在许多情况下对我来说非常有用，如果我可以指望它能正常工作。

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

- rob

Answer 1

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

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

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

我曾经需要这个功能的唯一情况是为了添加一组非常特定的样式，以便与书签一起使用。否则，我会动态添加样式表：

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

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

- zzzzBov

---

谢谢，知道了。这种功能有很多用途，从可定制的跨域小部件到开发工具，让你可以实时地调整网站而不用每次更改都刷新。 - rob

@rob，jQuery-UI使用外部样式表而不是假设使用它的人想要默认样式。我完全理解在某些情况下它很有用，但将HTML CSS和JS视为MVC模式的良好实践：HTML是模型，CSS是视图，JS是控制器。如果您将样式放入JS中，则会破坏该模式。 - zzzzBov

@zzzzBov，有一些特殊情况你可能没有遇到过，需要动态加载CSS文本（通常是在CSS文本动态生成时）。 - oxygen

@Tiberiu-IonuțStan，哪些CSS会被动态生成？我希望你不是在动态生成“content:”样式，因为那将是对CSS的滥用。 - zzzzBov

@zzzzBov 也许你有一些类似于动态内容和用户工具的表格，比如带有自定义颜色标记的表格，或者你有一个CSS构建器工具，或者在尝试多种颜色组合时覆盖任何网站的默认CSS的工具。 - oxygen

Answer 2

使用YepNope库，它会为您处理繁琐的事情。而且在压缩和最小化后只有1.7kb。

- jayarjo