1

虽然插入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语句。

4

3 回答 3

1

从这个问题处理：

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 中进行了测试，因此非常兼容。

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

动态样式 - 使用 JavaScript 操作 CSS - W3C Wiki
W3C DOM 兼容性 - CSS

于 2013-07-09T21:09:41.383 回答
0

我的建议：

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

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

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

于 2013-07-09T20:54:24.830 回答
0

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

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上

于 2013-07-09T21:09:45.450 回答