Internet Explorer中的styleSheet属性如何工作?

时间:2014-03-06 20:53:10

标签: javascript internet-explorer

我已经找到了我遇到的问题的解决方案。但我不明白为什么它有效。 以下是IE5中发生的情况 - IE10(在IE11中,styleSheet属性被工作表替换)。

var foo = document.createElement("style");
foo.type = "text/css";
console.log(foo.styleSheet);

上面的代码将记录一个styleSheet对象。

var bar = document.createElement("link");
bar.rel = "stylesheet";
bar.type = "text/css";
bar.href = "styles.css";
console.log(bar.styleSheet);

此代码记录“null”。

所以我的问题是为什么我可以访问新创建的样式元素的styleSheet属性而不是新创建的链接元素?

一些注释和观察:

  • 当我检查IE开发人员工具中的 bar 变量时,我可以清楚地看到 bar.styleSheet 实际上不是null。我可以看到styleSheet对象的所有属性。

  • type =“text / css”实际上不需要将任何一个元素视为样式表。如果排除这个,您仍然可以在开发人员工具中看到两者的styleSheet对象。如果将元素附加到文档,则将读取并应用样式规则。唯一不同的是,如果你没有为新创建的样式元素设置 type =“text / css”(比如 foo ),那就是 styleSheet属性将为null。

  • 如果您在上运行“for in”循环并尝试在循环内或循环后访问 bar.styleSheet 属性,则不再null并且以某种方式神奇地变成了styleSheet对象。

  • 正如所料,当您将 bar 添加到文档的头部时,您将能够访问 bar.styleSheet 属性。

最后一个注释还提出了一个侧面问题为什么在将元素插入文档之前,您能够访问 foo 的styleSheet属性?我问这是因为根据Microsoft的styleSheet object上的文档,

  

样式表只有在样式表中包含样式或链接元素时才可用于样式表...

我没有在我的代码中将foo附加到文档中,为什么我可以访问它的styleSheet对象?

我不是在寻找“解决方案”,而是解释为什么新创建的元素会以这种方式运行。

提前谢谢。

0 个答案:

没有答案