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 ...
随机推荐
- RunLoop
一.什么是RunLoop 从字面意思理解:运行循环.跑圈. 基本作用: 保持程序(应用)的持续运行. 处理程序(APP)中的各种事件(比如:触摸事件.定时事件.Selector事件等) 节省CPU资源 ...
- 在VisualStadio2015上使用EF6.0建立MySql数据库
1.新建工程 2.建立类的文件夹DAL 3.建立相关类 [Student类] using System;using System.Collections.Generic;using System.Li ...
- Unity - 接入Android SDK
在网络上,关于Unity与Android如何进行交互,雨松MOMO大神已经有两篇文章简单介绍了如何操作(1)Unity3D研究院之打开Activity与调用JAVA代码传递参数(2)Unity3D研究 ...
- Hbuilder开发HTML5 APP之侧滑菜单
1.思路: 其时有2个WebView,一个main是用来装主页面,一个menu是用来装菜单(为提高性能,菜单项是采用了预加载方式的,预加载时为了避免和主页面争夺资源,采用延时加载,例如: //plus ...
- 使用ReSharper打造团队代码检查流程
首先我想跟大家分享一下我们团队的代码检查流程. 1. 项目经理随时会检查成员的代码,如果发现有不符合规范的代码,会在注释里面加todo.比如,假设leo的代码不符合规范,那么项目经理就会加注释: // ...
- Hybrid App移动应用开发初探
一.移动App类型及其优缺点 1.1 Native App Native App(原生App)是用原生语言(Object-C/Java/C#/....)开发,用户需要下载安装的手机应用. 优点是 可以 ...
- 迷你MVVM框架avalon在兼容旧式IE做的努力
很多时候,写代码就像砌砖头,只要我们不关心盖楼的原因.建筑的原理.土木工程基础和工程经验,就算我们砌了100栋高楼,我们也就只是一个砌砖工人,永远也成为不了一个工程师,更别说建筑师了.而那些包工头也只 ...
- 在浏览器的背后（二） —— HTML语言的语法解析
当你看到这篇文章意味着我辜负了@教主的殷切期望周末木有去约会,以及苏老师@我思故我在北京鼓楼的落井下石成功了…… 本文demo powered by 已经结婚的@老赵的不再维护的wind.js 物是人 ...
- HTTP Status 500 - The absolute uri: http://java.sun.com/jsp/jstl/core cannot be resolved in either web.xml or the jar files deployed with this application
j 今天下午一直报这个问题,google了半天没有找到答案.百度了下,说是 tomcat的 lib文件夹下缺少jstl1.2,因为项目里面用的也是 jstl1.2和 standard-1.1.2.ja ...
- SQL Server游标
什么是游标 结果集,结果集就是select查询之后返回的所有行数据的集合. 游标则是处理结果集的一种机制吧,它可以定位到结果集中的某一行,多数据进行读写,也可以移动游标定位到你所需要的行中进行操作数据 ...