javascript - "insertRule"错误？

Question

我有 Javascript 代码，修改自“Javascript:权威指南”(第 442-444 页或 kindle 位置 14998)，它创建一个 CSS 样式表并插入规则。但我发现使用它提倡的标准化方法在 Chrome 中不起作用:

JSFiddle #1

如果上面的代码在Chrome中运行，只有“You!”这个词变成橙色。如果我引入一个丑陋的 hack，那么它在 Chrome 中工作正常:

JSFiddle #2

这是书中的错误、Chrome 中的错误，还是我搞砸了？

注意我有意不为这个练习使用库(例如 jquery 等)。

Answer 1

styleElt.innerHTML = styles;行

if (typeof styles === "string") {
// The argument is stylesheet text
if (styleElt) {
    styleElt.innerHTML = styles;
} else {

重新创建 styleSheet 对象。 styleSheet.styleSheet 的值与文档分离，这导致所有先前声明的样式规则丢失。

Firefox 的工作方式与 Chrome 相同，因此看起来这不是错误。