使用style對象可以操作行内樣式，但無法通路樣式表，而使用styleSheets對象可以通路<style>标簽定義的内部樣式表，以及<link>标簽或@import指令導入的外部樣式表，styleSheets對象屬于document,通過document.styleSheets進行通路。
styleSheets為每個樣式表定義了一個cssRules對象，用來包含指定樣式表中所有的規則（樣式），但IE不支援cssRules，需要使用rules對象表示樣式中的規則
var cssRules=document.styleSheets[0].cssRules||document.styleSheets[0].rules;
例1：通路内聯樣式表
<style>
#box{
width:400px;
height: 200px;
background-color:#BFFB8F;
border:solid 1px blue;
}
</style>
<script>
window.οnlοad=function(){
var box=document.getElementById("box");
var cssRules=document.styleSheets[0].cssRules||document.styleSheets[0].rules;
box.innerHTML="<h3>盒子樣式</h3>"
box.innerHTML+="<br>邊框："+cssRules[0].style.border;
box.innerHTML+="<br>背景："+cssRules[0].style.backgroundColor;
box.innerHTML+="<br>寬度："+cssRules[0].style.width;
box.innerHTML+="<br>高度："+cssRules[0].style.height;
}
</script>
</head>
<body>
<div id="box"></div>
</body>
例2：通路樣式表中的樣式
通路内部 樣式表---
<style>
#box{
width:400px;
height: 200px;
background-color:#BFFB8F;
border:solid 1px blue;
}
</style>
<script>
window.οnlοad=function(){
var box=document.getElementById("box");
var cssRules=document.styleSheets[0].cssRules||document.styleSheets[0].rules;
box.innerHTML="<h3>盒子樣式</h3>"
box.innerHTML+="<br>邊框："+cssRules[0].style.border;
box.innerHTML+="<br>背景："+cssRules[0].style.backgroundColor;
box.innerHTML+="<br>寬度："+cssRules[0].style.width;
box.innerHTML+="<br>高度："+cssRules[0].style.height;
}
</script>
通路外部樣式表---
style1.css：
body{color:black;}
p{color:gray;}
div{color:white;}
--
<style>
#box{color:green;}
.red{color:red;}
.blue{color:blue;}
</style>
<link rel="stylesheet" type="text/css" href="css/style1.css" target="_blank" rel="external nofollow" />
<script type="text/javascript">
window.οnlοad=function(){
var box=document.getElementById("box");
var cssRules0=document.styleSheets[0].cssRules||document.styleSheets[0].rules;
var cssRules=document.styleSheets[1].cssRules||document.styleSheets[1].rules;
box.innerHTML="第二個樣式表中，第一個樣式的color屬性值="+cssRules[0].style.color;//black
box.innerHTML+="<br>第一個樣式表中第三個樣式選擇符="+cssRules0[2].selectorText;//.blue讀取樣式的選擇符
cssRules0[2].style.color="#999";//編輯樣式
}
</script>
</head>
<body>
<div id="box"></div>
<p class="blue">原藍色字型，變為淺灰色</p>
</body>
添加樣式 styleSheet.addRule(selector,style,[index]) 、styleSheet.inserRule(rule,[index]);
styleSheet.addRule(selector,style,[index]);//選擇符（字元串），樣式聲明（字元串），索引号（預設-1，表示樣式表的末尾）
但Firefox不支援addRule，使用
styleSheet.inserRule(rule,[index]);//完整樣式（字元串），索引号(預設為0，放置在樣式表的末尾)
例
<style>
#box{color:green;}
.red{color:red;}
.blue{color:blue;}
</style>
<script type="text/javascript">
var styleSheets=document.styleSheets[0];
var index=styleSheets.length;//擷取樣式表中包含的個數
if(styleSheets.insertRule){
styleSheets.insertRule("p{background-color:red;color:#fff;padding:1 em;}",index);
}else{
styleSheets.addRule("P","background-color:red;color:#fff;padding:1 em;",index)
}
</script>
</head>
<body>
<p>在樣式表中添加樣式</p>
</body>
通路顯示樣式p.currentStyle.backgroundColor 或 document.defaultView.getComputedStyle(p,null).backgroundColor
IE下：currentStyle隻讀對象，此對象包含了文檔内所有元素的style對象的屬性，以及任何未被覆寫的CSS規則的style屬性
樣式重疊是，可使用currentStyle對象擷取目前p元素的最終顯示哪些樣式，這樣可以找到inserRule（）或addRule（）添加樣式失效的原因
非IE下：document.defaultView對象下getComputedStyle(p,null)方法：第一個參數表示元素，第二個參數表示僞類字元串，定義顯示位置，一般可以省略，或者設定為null
<style>
#box{color:green;}
.red{color:red;}
.blue{color:blue;background-color: #FFFFFF;}
</style>
<script type="text/javascript">
window.οnlοad=function(){
var styleSheets=document.styleSheets[0];
var index=styleSheets.length;//擷取樣式表中包含的個數
if(styleSheets.insertRule){
styleSheets.insertRule("p{background-color:red;color:#fff;padding:1 em;}",index);
}else{
styleSheets.addRule("P","background-color:red;color:#fff;padding:1 em;",index);
}
var p=document.getElementsByTagName("p")[0];
if(document.defaultView && document.defaultView.getComputedStyle){//非IE
p.innerHTML="背景色："+document.defaultView.getComputedStyle(p,null).backgroundColor
+"<br>字型顔色:"+document.defaultView.getComputedStyle(p,null).color;
}else if(p.currentStyle){//IE
p.innerHTML="背景色："+p.currentStyle.backgroundColor+"<br>字型顔色："+p.currentStyle.color;
}else{
p.innerHTML="目前浏覽器無法取得最終顯示樣式";
}
}
</script>
![CSS的僞元素和僞類的差別[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)