chrome 和 safari 对 document.styleSheets 理解的差异

chrome和safari同样的使用web kit。于是他们同时支持 document.styleSheets 。

当页面上有一个<style id="dynamicStyle"> 我们可以利用 document.styleSheets["dynamicStyle"] 来获取到style对象。

这时需要注意了 chrome 和 safari 的返回是不一样的

从chrome的调试来看 document.styleSheets["dynamicStyle"] 返回的是一个HTMLStyleElement对象而不是真正的CSSSTyleSheet 对象。于是我们不能直接获取到cssRules.

但是safari 通过document.styleSheets["dynamicStyle"] 获取到的真正的CSSStyleSheet 对象

于是在写兼容的时候不能写成

return document.styleSheets[id] || document.getElementById(id).sheet;

需要调整一下顺序就可以兼容了

return document.getElementById(id).sheet || document.styleSheets[id];

[本日志由 puterjam 于 2008-09-25 05:03 PM 编辑]
文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags: 浏览器兼容浏览器兼容 chromechrome safarisafari csscss