JS styleSheets物件：讀取頁面的所有CSS樣式

在 DOM 2 級規範中，使用 styleSheets 物件可以存取頁面中所有樣式表，包括用 <style> 標籤定義的內部樣式表，以及用 <link> 標籤或 @import 命令匯入的外部樣式表。

cssRules 物件包含指定樣式表中所有的規則（樣式）。提示，IE 支援 rules 物件表示樣式表中的規則。可以使用下面程式碼相容不同的瀏覽器：

var cssRules = document.styleSheets[0].cssRules || document.styleSheets[0].rules;

在上面程式碼中，先判斷瀏覽器是否支援 cssRules 物件，如果支援則使用 cssRules（非 IE 瀏覽器），否則使用 rules（IE 瀏覽器）。

範例

在下面範例中，通過 <style> 標籤定義一個內部樣式表，為頁面中的 <div id="box"> 標籤定義 4 個屬性：寬度、高度、背景色和邊框。然後在指令碼中使用 styleSheets 存取這個內部樣式表，把樣式表中的第 1 個樣式的所有規則讀取出來，在盒子中輸出顯示。程式碼如下：

<style type="text/css">
#box {
    width: 400px;
    height: 200px;
    background-color:#BFFB8F;
    border: solid 1px blue;
}
</style>
<script>
window.onload = 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;  //讀取cssRules的border屬性
     box.innerHTML +=  "<br>背景：" + cssRules[0].style.backgroundColor;  //讀取cssRules的background-color屬性
     box.innerHTML +=  "<br>高度：" + cssRules[0].style.height;  //讀取cssRules的height屬性
     box.innerHTML +=  "<br>寬度：" + cssRules[0].style.width;  //讀取cssRules的width屬性
}
</script> 
<div id="box"></div>

演示效果如下：

---