cssRules在不同浏览器中的兼容性
在一份HTML文档中可以用三种方式添加样式信息：
1、通过<link>元素引用外部样式表；
2、通过<style>元素在文档的头部添加样式信息；
3、在具体的文档元素上通过style特性指定样式信息。
对于第三种样式信息可以在DOM中通过元素节点的style属性进行操作。
对于前两种样式信息在DOM中要通过CSSStyleSheet对象的属性和方法进行操作。
CSSStyleSheet对象有一个官方文档规定的cssRules属性，表示样式表中（上述前两种样式表）的样式规则的集合（每一条样式规则包含CSS选择器、大括号和括号中的键值对）。
还有一个不是官方规定的rules属性，是较早版本的IE浏览器中实现cssRules属性的专有属性（至少IE11是支持cssRules属性的）。
下面看例子。
例1 通过<link>元素引用外部样式表的情况
HTML文档的代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>操作样式表</title>
<link rel="stylesheet" type="text/css" href="theme.css" />
<style type="text/css">
#ul1{
height: 3em;
background-color: pink;
}
</style>
</head>
<body>
<p id="p1">onq two</p>
<h1>操作样式表</h1>
<ul id="ul1">
<li>one</li>
<li>two</li>
</ul>
<input type="button" value="replace" onclick="test();" id="replace" />
<input type="button" value="clone" onclick="clon();" />
<input type="button" value="remove" onclick="remove();" />
<input type="button" value="recovery" onclick="recovery();" />
<script type="text/javascript">
function test() {
//第一种取得外部样式表的方法
var link1 = document.styleSheets[0]; //第二种取得外部样式表的方法
var a = document.getElementsByTagName("link")[0];
var link2 = a.sheet || a.styleSheet;
//两种方法结果的对比
alert(link1==link2);//true //取得外部样式表中的CSS代码
var rules = link1.cssRules || link1.rules; //试图输出全部的样式规则
alert(rules.cssText);//undefined //取得外部样式表中的第一条样式规则
var rule = rules[0];
//输出第一条样式规则
alert(rule.cssText); }
//将test()函数绑定到replace按钮的onclick事件上
</script>
</body>
</html>
外部样式表的代码（文件名为theme.css）：
#p1{
background-color: #20B2AA;
color: #FAF0E6;
font-weight: bold;
font-size: 2em;
font-family: "Times New Roman",Georgia,Serif;
}
h1{
font-family: "Times New Roman",Georgia,Serif;
background-color: #3CB371;
}
在IE11中的运行情况：
在Firefox中的运行情况：
在chrome中HTML文档的第40行代码报错： Uncaught TypeError: Cannot read property 'cssText' of null.
如果将第40行代码（test()函数中的alert(rules.cssText);//undefined）注释掉，再在chrome中运行，在Developer Tools中显示如下信息：
cssRules属性和rules属性的值均为null。
通过例1可知，对于<link>元素引用外部样式表，chrome不能通过cssRules属性和rules属性获取其中的CSS规则，而Firefox和IE可以。
那么对于<style>元素添加的样式信息会怎样呢？看下面的例子。
例2 通过<style>元素在文档的头部添加样式信息的情况
例2的代码其实与例1的代码几乎一样，只要更改其中的几个字符就行了：
把HTML文档中第28行代码中方括号里的数字0改为1；
把第31行代码中的link字符串改为style字符串；
改完之后再分别在chrome、Firefox和IE浏览器中运行就会看到代码在三种浏览器中都能正常运行，而且输出结果一样。
总结
通过上面两个例子可以知道对于<link>元素引用的外联样式表，chrome不知持通过cssRules属性获得其中的样式规则，而Firefox和IE可以。对于通过<style>元素添加的样式信息，三种浏览器都可以通过cssRules属性获得其中的样式规则。
PS.不但可以通过cssRules属性获得样式规则，还可以通过CSSStyleSheet对象的style属性（不是元素节点的style属性）修改具体的某一条规则，但这种修改会反映到所有与该条规则关联的HTML元素的样式，具体见《Javascript高级程序设计（第三版）》319页。
cssRules在不同浏览器中的兼容性的更多相关文章
- select在各个浏览器中的兼容性问题
我们知道select标签在各个浏览器中的属性和各浏览器的支持各有些不同,从而造成select选择框在各浏览器的显示有不同. 下面我们通过对主要CSS属性的支持,打造全兼容select. 对select ...
- 解决td标签上的position:relative属性在各浏览器中的兼容性问题
在css中的position属性规定了页面元素的定位类型,它有以下几个值: absolute:绝对定位,相对于static以外的第一个父元素进行定位: fixed:生成绝对定位的元素,相对于浏览器窗口 ...
- js在IE浏览器和非IE浏览器中的兼容性问题
下面列出IE和非IE中常见的一些js兼容性问题. //window.event IE:有window.event对象 非IE:没有window.event对象.可以通过给函数的参数传递eve ...
- 【转】DataURL在Web浏览器中的兼容性总结
IE8+,Firefox,Chrome,Opera,Safari 等现代浏览器普遍支持data URL IE8 data URL 最大长度限制为32k字节,超出无效.IE9+没有这个限制 IE只识别b ...
- [转]IE、FireFox、Chrome浏览器中关于URL传参中文乱码，解决兼容性问题！
原文地址:https://cloud.tencent.com/developer/article/1334736 前台用url传值中文,后台用request.getParameter接收参数.在Fir ...
- IE6中常见兼容性问题及浏览器显示难题
1.双倍边距Bug 问题描述:假如有一个ul,里面有若干li,当li设置为左浮动时,此时设置li的margin-left为10px,会在最左侧呈现双倍情况.即20px 正常显示: IE6显示: 修正方 ...
- 解决webkit浏览器中js方法中使用window.event提示未定义的问题
这实际上是一个浏览器兼容性问题,根源百度中一大堆,简要说就是ie中event对象是全局变量,所以哪里都能使用到,但是webkit内核的浏览器中却不存在这个全局变量event,而是以一个隐式的局部变量的 ...
- 第十一章：WEB浏览器中的javascript
客户端javascript涵盖在本系列的第二部分第10章,主要讲解javascript是如何在web浏览器中实现的,这些章节介绍了大量的脚本宿主对象,这些对象可以表示浏览器窗口.文档树的内容.这些章节 ...
- css在各浏览器中的兼容问题
CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并 整理了一下.对于web2.0的过度,请尽量用xhtml ...
随机推荐
- 我的emacs配置
我的emacs配置文件 ;; .emacs ;; ============================== Basic Configure START ====================== ...
- RadioGroup实现导航栏
[声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/ ...
- 用itextsharp打印pdf示例
学习了用itextsharp输出PDF文档,支持用XML定义文档,可定义多个数据源,简单的表达式,用于项目中效果还不错,其中PdfPageEvent类由包大人提供. 示例程序定义了一个简单的xml文件 ...
- MVC Castle依赖注入实现代码
1.MVc 实现依赖注入 public class WindsorControllerFactory : DefaultControllerFactory { private readonly IKe ...
- GIT和SVN之间的区别及基本操作对比
1)GIT是分布式的,SVN不是: 这是GIT和其它非分布式的版本控制系统,例如 SVN,CVS等,最核心的区别.如果你能理解这个概念,那么你就已经上手一半了.需要做一点声明,GIT并不是目前第一个或 ...
- CSS 使用母版页的内容页如何调用css和javascript
方案一: 把所有的css样式和javascript函数放到母版页的<head></head>中,我觉得这样做的弊端就是导致母版页的<head></head&g ...
- FFT时域与频域的关系，以及采样速率与采样点的影响
首先对于FFT来说,输入的信号是一个按一定采样频率获得的信号序列,而输出是每个采样点对应的频率的幅度(能量). 下面详细分析: 在FFT的输出数据中,第一个值是直流分量的振幅(这样对应周期有无穷的可能 ...
- 初探ReactJS.NET 开发
ReactJS通常也被称为"React",是一个刚刚在这场游戏中登场的新手.它由Facebook创建,并在2013年首次发布.Facebook认为React在处理SPA问题上可以成 ...
- MyBatis（增删改查）
1.工程中引入包: mybatis-3.2.7.mysql-connector-java-5.1.22-bin 2.添加配置文件: <?xml version="1.0" e ...
- MySQL 启动原理剖析
200 ? "200px" : this.width)!important;} --> 介绍 本篇文章主要从查看MySQL的启动命令的代码来详细了解MySQL的启动过程,内容 ...