在一份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. ormlite的使用方法

    ormlite是什么? 简单来说,就是我们定义一个实体类,利用这个框架,它可以帮我们吧这个实体映射到我们的数据库中,在Android中是SQLite,数据中的字段就是我们定义实体的成员变量. 官网地址 ...

  2. IOAPIC重定位中断处理函数思路整理

    因为小可并非硬件编程出身,汇编基础又比较差...所以刚开始理解利用IOAPIC重定位技术的时候相当困难. 何为IOAPIC? 首先,必须认识到它是一个硬件,可编程的硬件.我理解的它在整个流程中的作用如 ...

  3. Code First开发系列之数据库迁移

    返回<8天掌握EF的Code First开发>总目录 本篇目录 开启并运行迁移 使用迁移API 应用迁移 给已存在的数据库添加迁移 EF的其他功能 本章小结 自我测试 本系列的源码本人已托 ...

  4. SVG学习备忘录

    最近在写一个基于SVG的前端流程图\拓扑图图形框架. 一些容易忽略的问题备忘如下: 1.JS添加SVG元素需要使用document.createElementNS("http://www.w ...

  5. 使用NServiceBus开发分布式应用

    系列主题:基于消息的软件架构模型演变 NServiceBus 是一个.Net平台下开源的消息服务框架,这类产品有时也被称作ESB(Enterprise Service Bus)--企业服务总线.NSe ...

  6. HTTPS工作原理

    HTTPS是什么 HTTPS全称为Hypertext Transfer Protocol over Secure Socket Layer,及以安全为目标的HTTP通道,简单说就是HTTP的安全版本. ...

  7. .Net组件程序设计之异步调用

    .Net组件程序设计之异步调用 说到异步调用,在脑海中首先想到就是BeginInvoke(),在一些常用对象中我们也会常常见到Invoke()和BeginInvoke(), 要想让自己的组件可以被客户 ...

  8. static与并发

    在java中static用来修饰Class类中属性和方法. 被static修饰的成员属性和成员方法独立于该类的任何对象,它们在内存空间上会被放在描述Class的位置中,也就是说它们为此类(Class) ...

  9. angularjs自动化测试系列之karma

    angularjs自动化测试系列之karma karma test with jasmine 更好的利用工具是为了让生活更美好. 需要安装的东西: npm install karma -g mkdir ...

  10. MVC 区域内默认控制器不能访问（Multiple types were found that match the controller named ‘Index'）

    异常处理汇总-后端系列 http://www.cnblogs.com/dunitian/p/4523006.html 错误信息 和主页的默认控制器冲突了,修改下Areas里面的默认控制器就可以了