在一份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在不同浏览器中的兼容性的更多相关文章

  1. select在各个浏览器中的兼容性问题

    我们知道select标签在各个浏览器中的属性和各浏览器的支持各有些不同,从而造成select选择框在各浏览器的显示有不同. 下面我们通过对主要CSS属性的支持,打造全兼容select. 对select ...

  2. 解决td标签上的position:relative属性在各浏览器中的兼容性问题

    在css中的position属性规定了页面元素的定位类型,它有以下几个值: absolute:绝对定位,相对于static以外的第一个父元素进行定位: fixed:生成绝对定位的元素,相对于浏览器窗口 ...

  3. js在IE浏览器和非IE浏览器中的兼容性问题

    下面列出IE和非IE中常见的一些js兼容性问题.  //window.event   IE:有window.event对象   非IE:没有window.event对象.可以通过给函数的参数传递eve ...

  4. 【转】DataURL在Web浏览器中的兼容性总结

    IE8+,Firefox,Chrome,Opera,Safari 等现代浏览器普遍支持data URL IE8 data URL 最大长度限制为32k字节,超出无效.IE9+没有这个限制 IE只识别b ...

  5. [转]IE、FireFox、Chrome浏览器中关于URL传参中文乱码，解决兼容性问题！

    原文地址:https://cloud.tencent.com/developer/article/1334736 前台用url传值中文,后台用request.getParameter接收参数.在Fir ...

  6. IE6中常见兼容性问题及浏览器显示难题

    1.双倍边距Bug 问题描述:假如有一个ul,里面有若干li,当li设置为左浮动时,此时设置li的margin-left为10px,会在最左侧呈现双倍情况.即20px 正常显示: IE6显示: 修正方 ...

  7. 解决webkit浏览器中js方法中使用window.event提示未定义的问题

    这实际上是一个浏览器兼容性问题,根源百度中一大堆,简要说就是ie中event对象是全局变量,所以哪里都能使用到,但是webkit内核的浏览器中却不存在这个全局变量event,而是以一个隐式的局部变量的 ...

  8. 第十一章：WEB浏览器中的javascript

    客户端javascript涵盖在本系列的第二部分第10章,主要讲解javascript是如何在web浏览器中实现的,这些章节介绍了大量的脚本宿主对象,这些对象可以表示浏览器窗口.文档树的内容.这些章节 ...

  9. css在各浏览器中的兼容问题

    CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并 整理了一下.对于web2.0的过度,请尽量用xhtml ...

随机推荐

  1. 一鼓作气 博客--第二篇 note2

    1.循环正常结束是指没有中间截断,即没有执行break; for i in range(10) print(i) else: print("循环正常结束") 2.嵌套循环 for ...

  2. 数据库表A中随机X条数据满足N条件的数据插入到表B中

    select  * into c FROM a TABLESAMPLE (5 PERCENT) select top 5 per * into c from a order by newid() se ...

  3. 初识Python

    Python 简介 Python 是一个高层次的结合了解释性.编译性.互动性和面向对象的脚本语言. Python 的设计具有很强的可读性,相比其他语言经常使用英文关键字,其他语言的一些标点符号,它具有 ...

  4. ASP.NET Web API 2.1支持Binary JSON（Bson）

    ASP.NET Web API 2.1内建支持XML.Json.Bson.form-urlencoded的MiME type,今天重点介绍下Bson.BSON是由10gen开发的一个数据格式,目前主要 ...

  5. C++11 并发指南七(C++11 内存模型一：介绍)

    第六章主要介绍了 C++11 中的原子类型及其相关的API,原子类型的大多数 API 都需要程序员提供一个 std::memory_order(可译为内存序,访存顺序) 的枚举类型值作为参数,比如:a ...

  6. 【Java并发编程实战】-----“J.U.C”：ReentrantLock之三unlock方法分析

    前篇博客LZ已经分析了ReentrantLock的lock()实现过程,我们了解到lock实现机制有公平锁和非公平锁,两者的主要区别在于公平锁要按照CLH队列等待获取锁,而非公平锁无视CLH队列直接获 ...

  7. .NET组件程序设计之线程、并发管理（二）

    .Net组件程序设计之线程.并发管理(二) 2.同步线程 手动同步 监视器 互斥 可等待事件 同步线程 所有的.NET组件都支持在多线程的环境中运行,可以被多个线程并发访问,如果没有线程同步,这样的后 ...

  8. JavaScript面试时候的坑洼沟洄——数据类型

    前些日子写了篇关于最近找工作的一些感受的博客 找工作的一些感悟--前端小菜的成长,没想到得到了很多园友的共鸣,得到了很多鼓励,也有园友希望我分享一些笔试.面试的经验.我觉得分享一些笔试题没太多价值,对 ...

  9. Hibernate 3.3.2 文档翻译 Day01

    Hibernate 3.3.2 文档翻译 翻译人:微冷的雨 第一次书写:2015年11月29日 本人呕心沥血之作,请细心阅读领悟! Day01-1.1 项目描述 微冷的雨翻译:例如,我们将要建立一个可 ...

  10. Hadoop 裡的 fsck 指令

    Hadoop 裡的 fsck 指令,可檢查 HDFS 裡的檔案 (file),是否有 corrupt (毀損) 或資料遺失,並產生 HDFS 檔案系統的整體健康報告.報告內容,包括:Total blo ...