JavaScript中怎么獲取一個(gè)元素的樣式信息

JavaScript中怎么獲取一個(gè)元素的樣式信息，相信很多沒(méi)有經(jīng)驗(yàn)的人對(duì)此束手無(wú)策，為此本文總結(jié)了問(wèn)題出現(xiàn)的原因和解決方法，通過(guò)這篇文章希望你能解決這個(gè)問(wèn)題。

一. 跨瀏覽器方法

currentStyle對(duì)象是一個(gè)特定于IE的對(duì)象。它包含了一個(gè)元素的所有支持的和可用的CSS屬性的一個(gè)集合。它期待駱駝表示 格式的一個(gè)值 。

比如：fontFamily而不是font-family

所以，這里，如果是支持這個(gè)對(duì)象的瀏覽器調(diào)用的話(huà)，就使用CSSPROP。

從代碼中，可以看出，其它瀏覽器，使用的是window.getComputedStyle方法。該方法也可以通過(guò)document.defalutView.getComputedStyle來(lái)訪(fǎng)問(wèn)。這個(gè)方法接受兩個(gè)參數(shù)，元素和一個(gè)偽元素，后者通常為空(或者一個(gè)空字符串"")。

二. 獲取屬性的優(yōu)先級(jí)

竟然是能獲取所有與DOM相關(guān)的樣式屬性，那必然有一個(gè)優(yōu)先級(jí)的問(wèn)題。

<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

當(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è)置的

看完上述內(nèi)容，你們掌握J(rèn)avaScript中怎么獲取一個(gè)元素的樣式信息的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！