打印

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

关键字

document styleSheet CSS CSSStyleSheet rule style