建站
咨詢
售后
建站咨詢
新聞中心
關(guān)于JavaScript如何獲取一個(gè)元素的所有樣式值，及設(shè)置一個(gè)元素的樣式值，所有相關(guān)知識(shí)點(diǎn)，看這兩篇夠了。記住了，都很簡(jiǎn)單的。來(lái)來(lái)來(lái)...
會(huì)澤ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場(chǎng)景，ssl證書(shū)未來(lái)市場(chǎng)廣闊！成為創(chuàng)新互聯(lián)公司的ssl證書(shū)銷(xiāo)售渠道，可以享受市場(chǎng)價(jià)格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：18982081108（備注：SSL證書(shū)合作）期待與您的合作！
想要獲取一個(gè)元素的一個(gè)或者多個(gè)CSS樣式設(shè)置，這應(yīng)該是搞前端的都碰到過(guò)的一件事。如果你平時(shí)用JavaScript實(shí)現(xiàn)過(guò)一些動(dòng)畫(huà)效果什么的?？隙ň蜁?huì)知道一個(gè)問(wèn)題：元素內(nèi)聯(lián)樣式和動(dòng)態(tài)設(shè)置的樣式容易獲取，但默認(rèn)樣式表設(shè)置的及用戶代理默認(rèn)設(shè)置的樣式獲取比較費(fèi)勁。
其實(shí)現(xiàn)代碼說(shuō)難不難，說(shuō)容易吧，這其中還真有一些需要特別清楚的地方，今天，我這里給大家簡(jiǎn)單聊聊，將需要注意的地方全部捋出來(lái)。
下面的講解用這個(gè)例子：
上面這個(gè)例子很簡(jiǎn)單，看這篇文章的人沒(méi)有看不懂的，一個(gè)ID值為elem的DOM元素具有內(nèi)聯(lián)樣式和樣式表設(shè)置的默認(rèn)樣式。下面開(kāi)始講重點(diǎn)
獲取內(nèi)聯(lián)和動(dòng)態(tài)設(shè)置的樣式
獲取內(nèi)聯(lián)和動(dòng)態(tài)設(shè)置的樣式方式有兩種
1. 直接訪問(wèn)元素的style屬性
2. 使用getAttribute方法
一. 證明二者都無(wú)法獲得樣式表設(shè)置的樣式
有些結(jié)論可能好多人沒(méi)有證實(shí)過(guò)，模模糊糊。比如，上面提到的這兩種方式是否可以獲取樣式表設(shè)置的樣式，如font-size/background-color等。
- var elem = document.getElementById('elem')
- console.log(elem.style.fontSize)
- // 無(wú)輸出
- console.log(elem.getAttribute('style'))
- // 輸出：height:30px; width:150px;
二. 方式一需要注意的地方
直接訪問(wèn)style對(duì)象的方式必須使用一種特殊的語(yǔ)法。
不帶連字符的屬性值，如width，可以直接訪問(wèn)。
- elem.style.width
帶連字符的屬性值，需要使用駱駝表示法。如background-color
- elem.style.backgroundColor
三. 方式二需要注意的地方
使用方法來(lái)訪問(wèn)style對(duì)象，然而你必須從字符串中解析出來(lái)。
使用setAttribute設(shè)置樣式時(shí)，之前動(dòng)態(tài)樣式和內(nèi)聯(lián)樣式都會(huì)被重置。這一點(diǎn)也很好理解。因?yàn)樗O(shè)置的是style。
當(dāng)然，使用getAttribute來(lái)訪問(wèn)style屬性的時(shí)候，IE7也會(huì)返回一個(gè)對(duì)象，而不是帶有CSS值的一個(gè)字符串。
來(lái)簡(jiǎn)單總結(jié)一下
上面說(shuō)了兩種獲取動(dòng)態(tài)樣式和內(nèi)聯(lián)樣式的方式及一些需要注意的地方。下一篇我來(lái)講一下如何使用一種跨瀏覽器方式同時(shí)獲取內(nèi)聯(lián)樣式，動(dòng)態(tài)設(shè)置樣式，用戶代理以及樣式表設(shè)置的樣式。也是常用的一種方式。還有各自獲取的優(yōu)先級(jí)。
【責(zé)任編輯：龐桂玉 TEL：（010）68476606】
分享文章：「前篇」JavaScript如何獲取一個(gè)元素的樣式信息
本文URL：http://www.dlmjj.cn/article/djedshi.html
