在一份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. Skyshop: Image-Based Lighting Tools & Shaders插件调整反射光不明显的模型

    在Skyshop插件中,使用类似不锈钢等材质的模型,实时反光效果非常好,如果是其他反光不明显的模型,如砖头,建筑等,这时候就需要调整模型的Shader的高光贴图了. 如官方例子中的用砖块组成的柱子,反 ...

  2. Excel中添加下拉框

    数据->数据验证->数据验证 设置—>允许下拉框中选择序列,来源中写下拉选项,每个选项之间用逗号隔开

  3. android培训机构排名

    Android开发行业的热度打开了Android培训领域的市场,我们会发现有很多的Android培训机构都在大势宣传自己的师资.就业情况.教学环境等 ,然而到底要选择哪个呢?令很多的人困惑.2015年 ...

  4. ABP理论学习之验证DTO

    返回总目录 本篇目录 验证介绍 使用数据注解 自定义验证 标准化 验证介绍 首先应该验证应用的输入.用户或者其它应用都可以向该应用发送输入.在一个web应用中,验证通常要实现两次:在客户端和服务器端. ...

  5. SQL Server 数据库设计规范

    数据库设计规范 1.简介 数据库设计是指对一个给定的应用环境,构造最优的数据库模式,建立数据库及其他应用系统,使之能有效地存储数据,满足各种用户的需求.数据库设计过程中命名规范很是重要,命名规范合理的 ...

  6. Lua table之弱引用

    Lua采用了基于垃圾收集的内存管理机制,因此对于程序员来说,在很多时候内存问题都将不再困扰他们.然而任何垃圾收集器都不是万能的,在有些特殊情况下,垃圾收集器是无法准确的判断是否应该将当前对象清理.这样 ...

  7. Rabbitmq安装与配置

    install: 1.安装Erlang: $yum -y install erlang 2.安装rabbitmq-server: $rpm --import https://www.rabbitmq. ...

  8. Spring MVC和CXF集成

    前提: 1.spring mvc环境已搭建好,能跑起来. 2.下载apache-cxf-2.7.3.zip的压缩包,解压apache-cxf-2.7.3.zip压缩包,拷贝如下几个jar包即可. 配置 ...

  9. gulp启动一个小型web服务器配置&browserify(require)

    var gulp = require('gulp'), connect = require('gulp-connect'), // 运行live reload服务器 browserify = requ ...

  10. python中configparser模块

    python中的configparse模块的使用 主要用来解析一些常用的配置,比如数据配置等. 例如:有一个dbconfig.ini的文件 [section_db1] db = test_db1 ho ...