JS currentStyle屬性和getComputedStyle()方法：讀取CSS顯示樣式

CSS 樣式具有重疊特性，因此定義的樣式與最終顯示的樣式並非並非完全相同。DOM 定義了一個方法幫助使用者快速檢測當前物件的顯示樣式，不過 IE 和標準 DOM 之間實現的方法不同。

IE 瀏覽器

IE 使用 currentStyle 物件讀取元素的最終顯示樣式，是唯讀物件。currentStyle 物件包含元素的 style 屬性，以及瀏覽器預定義的預設 style 屬性。

【範例1】為類樣式 blue 增加一個背景色為白色的宣告，然後把該類樣式應用到段落文字中。

<style type="text/css">
    #box { color:green; }
    .red { color:red; }
    .blue {
        color:blue;
        background-color:#FFFFFF;
    }
</style>
<script>
    window.onload = function(){
        var styleSheets = document.styleSheets[0];  //獲取樣式表參照
        var index = styleSheets.length;  //獲取樣式表中包含樣式的個數
        if(styleSheets.insertRule){  //判斷瀏覽器是否支援insertRule()方法
            //使用insertRule()方法在文件內部樣式表中增加一個p標籤選擇符的樣式，設定段落背景色為紅色，字型顏色為白色，補白為一個字型大小。插入位置在樣式表的末尾，
            styleSheets.insertRule("p{background-color:red;color:#fff;padding:1em;}", index);
        }else{  //如果哦瀏覽器不支援insertRule()方法
            styleSheets.addRule("P", "background-color:red;color:#fff;padding:1em;", index);
        }
    }
</script>
<p class="blue">在樣式表中增加樣式操作</p>

在瀏覽器中預覽，會發現指令碼中使用 insertRule()（或 addRule()）方法新增的樣式無效，效果如圖所示。

---