将样式元素动态插入 DOM 的最终跨浏览器方式答案

【问题标题】：Final cross browser way to dynamically insert style elements into the DOM将样式元素动态插入 DOM 的最终跨浏览器方式
【发布时间】：2014-01-02 12:34:15
【问题描述】：

虽然将style 节点插入 DOM 听起来很简单，但我发现了许多相互矛盾的方法。所以我决定在 stackoverflow 上查找它，似乎许多帖子都提供了可以满足我需求的方法，但它们不一定彼此一致。

我遇到了以下 javascript 方法：

返回一个样式元素，在旧浏览器中显然没有“styleSheet”属性。

document.createElement("style")

返回一个 styleSheet 对象，尽管我不知道您随后将如何访问该样式元素（您需要将其插入到 DOM 中）。

document.createStyleElement()

下面的前三个方法适用于 styleSheets，其他是直接适用于样式节点的“hacks”。

styleSheet.cssText
styleSheet.addRule
styleSheet.insertRule
style.createTextNode
style.innerHTML

我也很难找到（至少）前三个 styleSheet 方法使用的正确语法。例如。是否必须包含花括号和分号。

此外，这些属性用于在各种浏览器中访问样式表：

document.styleSheets[index]
element.styleSheet
element.sheet

对于插入样式元素的跨浏览器方法，正确的方法包是什么？这应该涵盖较旧的浏览器，例如 IE6、子选择器（例如 :visited）和 !important 语句。

【问题讨论】：

"这应该涵盖旧版浏览器，例如 IE6"。为什么？没有人支持 IE6了。
好吧，确保它得到支持......

标签： javascript cross-browser

【解决方案1】：

处理自this问题：

var css = 'h1 { background: red; }',
    head = document.head || document.getElementsByTagName('head')[0],
    style = document.createElement('style');

style.type = 'text/css';

if (style.styleSheet)
    style.styleSheet.cssText = css;
else
    style.appendChild(document.createTextNode(css));

head.appendChild(style);

它说它已在 IE 7-9、Firefox、Opera 和 Chrome 中测试过，因此非常兼容。

这里有两个链接可能会有所帮助：

Dynamic style - manipulating CSS with JavaScript - W3C Wiki
W3C DOM Compatibility - CSS

【讨论】：

【解决方案2】：

我的建议：

var elem = document.createElement('style');
elem.innerHTML = 'body { background: green }';
document.body.appendChild(elem);

现场演示： http://jsfiddle.net/simevidas/bhX86/

我正在研究如何在 IE8 中进行这项工作。

【讨论】：

我相信这已经完成并重做了很多次。它通常归结为为 IE 设置 .styleSheet.cssText（您还需要设置 type 属性）jsfiddle.net/bhX86/9

【解决方案3】：

你的意思是这样的？这应该是跨浏览器的。

HTML

<div id="target">text</div>

Javascript

function injectStyle(data, attributes, inBody) {
    attributes = attributes || {};
    inBody = inBody || false;

    var inject = document.createElement("style"),
        i;

    inject.type = "text/css";
    for (i in attributes) {
        if (attributes.hasOwnProperty(i)) {
            inject[i] = attributes[i];
        }
    }

    inject.appendChild(document.createTextNode(data));
    if (inBody) {
        return document.body.appendChild(inject);
    }

    return (document.head || document.getElementsByTagName("head")[0] || document.documentElement).appendChild(inject);
}

injectStyle("#target { border-style: solid; border-width: 5px; }", {
    id: "injectedStyle"
});

在jsfiddle

【讨论】：