新聞中心
上一篇講了兩種獲取樣式的方式。

1. 通過(guò)直接訪問(wèn)style對(duì)象
2. 通過(guò)方法getAttribute
這兩種方法都沒法獲取用戶代理或者樣式表設(shè)置的樣式值。今天我來(lái)講一種跨瀏覽器的方式來(lái)獲取所有的與DOM相關(guān)的樣式值。
一. 跨瀏覽器方法
currentStyle對(duì)象是一個(gè)特定于IE的對(duì)象。它包含了一個(gè)元素的所有支持的和可用的CSS屬性的一個(gè)集合。它期待駱駝表示 格式的一個(gè)值 。
比如:fontFamily而不是font-family
所以,這里,如果是支持這個(gè)對(duì)象的瀏覽器調(diào)用的話,就使用CSSPROP。
從代碼中,可以看出,其它瀏覽器,使用的是window.getComputedStyle方法。該方法也可以通過(guò)document.defalutView.getComputedStyle來(lái)訪問(wèn)。這個(gè)方法接受兩個(gè)參數(shù),元素和一個(gè)偽元素,后者通常為空(或者一個(gè)空字符串"")。
二. 獲取屬性的優(yōu)先級(jí)
竟然是能獲取所有與DOM相關(guān)的樣式屬性,那必然有一個(gè)優(yōu)先級(jí)的問(wèn)題。
- elem.style.fontSize = '12px';
- console.log(getStyle(elem, "fontSize", "font-size"))
- // 輸出12px
當(dāng)在幾處同時(shí)設(shè)置一個(gè)屬性時(shí),getStyle方法獲取永遠(yuǎn)是那個(gè)起使用的,這一點(diǎn)要高度關(guān)注。
getStyle取值的優(yōu)先級(jí)是:
1. 動(dòng)態(tài)設(shè)置的
2. 內(nèi)聯(lián)設(shè)置的
3. 樣式表設(shè)置的
4. 瀏覽器默認(rèn)設(shè)置的
分享文章:「后篇」JavaScript如何獲取一個(gè)元素的樣式信息
當(dāng)前路徑:http://m.fisionsoft.com.cn/article/djhchij.html


咨詢
建站咨詢
