## CSS 樣式的優先級別 為 HTML 頁面中的元素通過多種方式定義 CSS 樣式。這些定義 CSS 樣式方式的優先級別各不相同： - 內聯樣式的優先級別最高 - ID 選擇器和偽類 - 類選擇器和屬性選擇器 - 元素選擇器和偽元素 - 通配符選擇器和組合選擇器 - !important 將當前選擇器的優先級別設置為最高 通過 DOM 操作 HTML 頁面中指定元素的樣式時，只需要獲取其運行時的有效樣式即可。 ## getComputedStyle() 方法 Window 對象中提供了 getComputedStyle() 方法，用于獲取指定元素的當前有效樣式，得到 CSSStyleDeclaration 對象。 其語法結構如下: ```javascript var style = window.getComputedStyle(element, [pseudoElt]); ``` 上述語法結構中，向 getComputedStyle() 方法傳遞的 element 參數表示獲取有效樣式的指定元素。而 pseudoElt 參數是個可選項，指定一個要匹配的偽元素的字符串。 > **值得注意的是:** pseudoElt 參數必須對普通元素省略（或 null）。 getComputedStyle() 方法的返回值是 CSSStyleDeclaration 對象，表示指定元素的有效樣式。 我們可以通過以下示例代碼，學習 getComputedStyle() 方法的使用方式: ```javascript var btn = document.getElementById('btn'); var style = window.getComputedStyle(btn, null); console.log(style.backgroundColor); ``` ## currentStyle 屬性 由于 getComputedStyle() 方法在 IE 8 及之前版本的瀏覽器中并不支持。所以，如果想要在 IE 8 及之前版本的瀏覽器中實現相同功能的話，需要使用 currentStyle 屬性。 ```javascript var btn = document.getElementById('btn'); var style = btn.currentStyle; console.log(style.backgroundColor); ``` 通過 element.currentStyle 屬性得到 currentStyle 對象，該對象提供了有關 CSS 樣式表的所有樣式屬性。 ## 瀏覽器兼容問題解決方案 在實際開發中，我們需要既支持 IE 8 及之前版本的瀏覽器，也需要支持其他瀏覽器。所以，我們可以編寫如下代碼，解決瀏覽器的兼容問題: ```javascript function getStyle(elem, attrName){ // 判斷 window.getComputedStyle() 方法是否存在 if (window.getComputedStyle){ return getComputedStyle(elem, null); }else{ return elem.currentStyle[attrName]; } } ```