我早已知道可以使用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技术逐个构建元素)在许多情况下对我来说非常有用,如果我可以指望它能正常工作。
这种方法是否一直被支持?有什么缺点吗?我特别好奇,因为我从未在任何地方看到过这种方法的建议。