HTML/JS转换工具
Unicode编码转换
当前位置:首页 > WEB前端 > JavaScript > 

Firefox 和 Opera 不支持 "document.styleSheets" 通

来源:IT技术网编辑:李建新发布于:2017-02-12人围观

 

根据 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 规范中的整数下标方式获取。

织梦二维码生成器

与相关的文章
有时间的话来看看IT界的突发事件
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片