Question

尽管在DOM中插入style节点听起来相当微不足道，但我发现了许多相互矛盾的方法。所以我决定在stackoverflow上查一下，看来很多帖子都提供了我需要的方法，但是它们并不一定相互认同。

我遇到了以下javascript方法：

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

document.createElement("style")

返回一个styleSheet对象，虽然我不知道你将如何访问样式元素（你需要插入到DOM中）。

document.createStyleElement()

下面的前三种方法适用于styleSheets，其他方法是直接在样式节点上工作的“黑客”。

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

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

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

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

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

Answer 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

Answer 2

我的建议：

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

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

我正在研究如何在IE8中完成这项工作。

Answer 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"
});

on jsfiddle

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

3 个答案: