SD9009: Firefox 和 Opera 不支持 "document.styleSheets" 通过 STYLE 元素 id 获取 CSSStyleSheet 对象

标准参考•
问题描述•
造成的影响•
受影响的浏览器•
问题分析•
解决方案•
参见

作者：陆远

标准参考

根据 W3C DOM Level2 Style 规范中的描述，document.styleSheets 返回一个 StyleSheetList 抽象接口对象，StyleSheetList 是一组类似 collection 的 StyleSheet 接口对象的集合，可以通过以 0 起始的整数作为下标来获取其内的每一个 StyleSheet。

而 StyleSheet 则是任意类型的样式表的一个基础抽象接口，它代表了一个单一的与结构化文档相关的样式表。在 HTML 中，StyleSheet 同时代表了由 LINK 元素引入的外部样式表以及由 STYLE 元素创建的内联样式表。

CSSStyleSheet 继承自 StyleSheet，它是一个具体的接口，代表一个 CSS 样式表，即一个 content-type 为 "text/css" 的样式表。

关于 StyleSheet 等接口的更多资料，请参见 DOM Level2 Style 规范中的内容。

问题描述

Firefox Opera 不支持 "document.styleSheets" 通过 STYLE 元素 id 获取 CSSStyleSheet 对象，仅支持整数作为下标获取。

造成的影响

若通过这种方式获取 CSSStyleSheet 对象则会在 Firefox 及 Opera 中返回 undefined，可能导致后续代码出错。

受影响的浏览器

Firefox Opera

问题分析

分析以下代码：

<!DOCTYPE html> <html> <head> <style id="s"> body { background:#eee;
                } </style> </head> <body> <script> var t = document.styleSheets[0]; var s =
                document.styleSheets["s"]; alert(t); alert(s); </script> </body>
                </html>

页面中有一个 id 为 "s" 的 STYLE 元素，其内有内联样式表。在脚本中通过 document.styleSheets[0] 及 document.styleSheets["s"] 欲获取 SYTLE 元素对应的 CSSStyleSheet 对象。

在各浏览器中运行结果为：

	IE6 IE7 IE8 Chrome Safari	Firefox Opera
document.styleSheets[0]	OK	OK
document.styleSheets["s"]	OK	FAIL

可见，Firefox Opera 不支持 "document.styleSheets" 通过 STYLE 元素 id 获取 CSSStyleSheet 对象，仅支持整数作为下标获取。
而其他浏览器则这两种方式均支持。

解决方案

避免使用 "document.styleSheets" 通过 STYLE 元素 id 获取 CSSStyleSheet 对象，使用 W3C 规范中的整数下标方式获取。

参见

知识库

测试环境

操作系统版本:	Windows 7 Ultimate build 7600
浏览器版本:	IE6 IE7 IE8 Firefox 3.6.7 Chrome 6.0.472.0 dev Safari 5.0 Opera 10.60
测试页面:	CSSStyleSheet.html
本文更新时间:	2010-07-23