上一篇講了兩種獲取樣式的方式。
1. 通過直接訪問style對象
2. 通過方法getAttribute
這兩種方法都沒法獲取用戶代理或者樣式表設置的樣式值。今天我來講一種跨瀏覽器的方式來獲取所有的與DOM相關的樣式值。
一. 跨瀏覽器方法
currentStyle對象是一個特定於IE的對象。它包含了一個元素的所有支持的和可用的CSS屬性的一個集合。它期待駱駝表示 格式的一個值 。
比如：fontFamily而不是font-family
所以，這裡，如果是支持這個對象的瀏覽器調用的話，就使用CSSPROP。
從代碼中，可以看出，其它瀏覽器，使用的是window.getComputedStyle方法。該方法也可以通過
document.defalutView.getComputedStyle來訪問。這個方法接受兩個參數，元素和一個偽元素，後者通常為空（或者一個空字元串””）。
二. 獲取屬性的優先順序
竟然是能獲取所有與DOM相關的樣式屬性，那必然有一個優先順序的問題。
<style>
#elem{font-size:23px;}
</style>
<input id ="elem" style="font-size:18px;"/>
elem.style.fontSize = '12px';
console.log(getStyle(elem, "fontSize", "font-size"))
// 輸出12px
當在幾處同時設置一個屬性時，getStyle方法獲取永遠是那個起使用的，這一點要高度關注。
getStyle取值的優先順序是：
1. 動態設置的
2. 內聯設置的
3. 樣式表設置的
4. 瀏覽器默認設置的
原創文章，作者：投稿專員，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/209165.html
微信掃一掃 
支付寶掃一掃 