在一份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. 使用DataList实现数据分页的技术

    今天做网站的时候,用到了分页技术,我把使用方法记录下来,以便日后查阅以及帮助新手朋友们. DataList控件可以按照列表的形式显示数据表中的多行记录,但是被显示的多行记录没有分页功能,使用起来不太方 ...

  2. matlab 中 eps 的分析

    eps(a)是|a|与大于|a|的最小的浮点数之间的距离,距离越小表示精度越高.默认a=1: 这里直接在matlab中输入:eps == eps(1)(true). 我们知道浮点数其实是离散的,有限的 ...

  3. ASP.Net WebForm温故知新学习笔记：二、ViewState与UpdatePanel探秘

    开篇:经历了上一篇<aspx与服务器控件探秘>后,我们了解了aspx和服务器控件背后的故事.这篇我们开始走进WebForm状态保持的一大法宝—ViewState,对其刨根究底一下.然后,再 ...

  4. 剑指Offer面试题：34.翻转单词顺序VS左旋转字符串

    一.题目一:翻转单词顺序 1.1 题目说明 题目一:输入一个英文句子,翻转句子中单词的顺序,但单词内字符的顺序不变.为简单起见,标点符号和普通字母一样处理.例如输入字符串"I am a st ...

  5. Web3DGame之路（三）分析babylonjs

    BabylonJS的例子十分详实 http://doc.babylonjs.com/tutorials Babylonjs的学习比较顺畅,开始做一些深入分析   一.语言选择 首先是js还是ts的问题 ...

  6. 优化MySchool数据库设计之【巅峰对决】

    优化MySchool数据库设计 之独孤九剑 船舶停靠在港湾是很安全的,但这不是造船的目的 By:北大青鸟五道口原玉明老师 1.学习方法: 01.找一本好书 初始阶段不适合,可以放到第二个阶段,看到知识 ...

  7. Module Zero之语言管理

    返回<Module Zero学习目录> 概览介绍 如何开启 管理语言 管理本地化文本 概览介绍 ABP定义了一个健壮的UI本地化系统,它可用于服务端和客户端.它允许在不同的资源中(Reso ...

  8. javaScript 基础知识

    一.三个对话框 1.alert("提示信息") 弹出只带有一个确定按钮的对话框2.confirm("提示信息") 弹出有确定和取消按钮的对话框3.prompt( ...

  9. GitHub的使用记录

    前言: 该贴为笔者在使用GItHub中的一些使用注意,及Git的基本命令,会一直记录笔者在使用GitHub中可能产生的错误及解决方法(会一直更新中),待一些Git初使用者参考,如果有说明不详细或不对的 ...

  10. iOS-数据持久化详细介绍

    1.iOS-数据解析XML解析的多种平台介绍 2.iOS-数据持久化基础-JSON与XML数据解析 3.iOS-数据持久化基础-沙盒机制 4.   数据持久化的几种方式: 1)plist(XML属性列 ...