Question

我早就知道您可以使用addRule（）和insertRule（）动态地将样式规则加载到页面中，具体取决于它是IE还是符合标准的浏览器。但我刚刚发现在Chrome上，一个更普遍有用（对我而言）的方法工作得很好：创建一个样式元素，用任意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技术逐个构建元素）对我来说特别有用。如果我可以指望它工作的情况。

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

Answer 1

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

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

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

我曾经需要的唯一的情况是添加一大堆非常具体的样式以供书签使用。否则，我将动态添加样式表：

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

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

Answer 2

使用YepNope lib，它会为你做脏事。压缩和缩小时只有 1.7kb 。

动态加载css方法

2 个答案: