在一份HTML文檔中可以用三種方式添加樣式信息：
1、通過<link>元素引用外部樣式表；
2、通過<style>元素在文檔的頭部添加樣式信息；
3、在具體的文檔元素上通過style特性指定樣式信息。
對於第三種樣式信息可以在DOM中通過元素節點的style屬性進行操作。
對於前兩種樣式信息在DOM中要通過CSSStyleSheet對象的屬性和方法進行操作。
CSSStyleSheet對象有一個官方文檔規定的cssRules屬性，表示樣式表中（上述前兩種樣式表）的樣式規則的集合（每一條樣式規則包含CSS選擇器、大括號和括號中的鍵值對）。
還有一個不是官方規定的rules屬性，是較早版本的IE瀏覽器中實現cssRules屬性的專有屬性（至少IE11是支持cssRules屬性的）。
下面看例子。
例1 通過<link>元素引用外部樣式表的情況
HTML文檔的代碼：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>操作樣式表</title> 6 <link rel="stylesheet" type="text/css" href="theme.css" /> 7 <style type="text/css"> 8 #ul1{ 9 height: 3em; 10 background-color: pink; 11 } 12 </style> 13 </head> 14 <body> 15 <p id="p1">onq two</p> 16 <h1>操作樣式表</h1> 17 <ul id="ul1"> 18 <li>one</li> 19 <li>two</li> 20 </ul> 21 <input type="button" value="replace" onclick="test();" id="replace" /> 22 <input type="button" value="clone" onclick="clon();" /> 23 <input type="button" value="remove" onclick="remove();" /> 24 <input type="button" value="recovery" onclick="recovery();" /> 25 <script type="text/javascript"> 26 function test() { 27 //第一種取得外部樣式表的方法 28 var link1 = document.styleSheets[0]; 29 30 //第二種取得外部樣式表的方法 31 var a = document.getElementsByTagName("link")[0]; 32 var link2 = a.sheet || a.styleSheet; 33 //兩種方法結果的對比 34 alert(link1==link2);//true 35 36 //取得外部樣式表中的CSS代碼 37 var rules = link1.cssRules || link1.rules; 38 39 //試圖輸出全部的樣式規則 40 alert(rules.cssText);//undefined 41 42 //取得外部樣式表中的第一條樣式規則 43 var rule = rules[0]; 44 //輸出第一條樣式規則 45 alert(rule.cssText); 46 47 } 48 //將test()函數綁定到replace按鈕的onclick事件上 49 </script> 50 </body> 51 </html>
外部樣式表的代碼（文件名為theme.css）：
1 #p1{ 2 background-color: #20B2AA; 3 color: #FAF0E6; 4 font-weight: bold; 5 font-size: 2em; 6 font-family: "Times New Roman",Georgia,Serif; 7 } 8 9 h1{ 10 font-family: "Times New Roman",Georgia,Serif; 11 background-color: #3CB371; 12 }
在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頁。