在一份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页。