「前篇」JavaScript如何獲取一個元素的樣式資訊
關於JavaScript如何獲取一個元素的所有樣式值，及設定一個元素的樣式值，所有相關知識點，看這兩篇夠了。記住了，都很簡單的。來來來...
想要獲取一個元素的一個或者多個CSS樣式設定，這應該是搞前端的都碰到過的一件事。如果你平時用JavaScript實現過一些動畫效果什麼的。肯定就會知道一個問題：元素內聯樣式和動態設定的樣式容易獲取，但預設樣式表設定的及使用者代理預設設定的樣式獲取比較費勁。
其實現程式碼說難不難，說容易吧，這其中還真有一些需要特別清楚的地方，今天，我這裡給大家簡單聊聊，將需要注意的地方全部捋出來。
下面的講解用這個例子：
上面這個例子很簡單，看這篇文章的人沒有看不懂的，一個ID值為elem的DOM元素具有內聯樣式和樣式表設定的預設樣式。下面開始講重點
獲取內聯和動態設定的樣式
獲取內聯和動態設定的樣式方式有兩種
1. 直接訪問元素的style屬性
2. 使用getAttribute方法
一. 證明二者都無法獲得樣式表設定的樣式
有些結論可能好多人沒有證實過，模模糊糊。比如，上面提到的這兩種方式是否可以獲取樣式表設定的樣式，如font-size/background-color等。
var elem = document.getElementById('elem')
console.log(elem.style.fontSize)
// 無輸出
console.log(elem.getAttribute('style'))
// 輸出：height:30px; width:150px;
二. 方式一需要注意的地方
直接訪問style物件的方式必須使用一種特殊的語法。
不帶連字元的屬性值，如width，可以直接訪問。
elem.style.width
帶連字元的屬性值，需要使用駱駝表示法。如background-color
elem.style.backgroundColor
三. 方式二需要注意的地方
使用方法來訪問style物件，然而你必須從字串中解析出來。
使用setAttribute設定樣式時，之前動態樣式和內聯樣式都會被重置。這一點也很好理解。因為它設定的是style。
當然，使用getAttribute來訪問style屬性的時候，IE7也會返回一個物件，而不是帶有CSS值的一個字串。
來簡單總結一下
上面說了兩種獲取動態樣式和內聯樣式的方式及一些需要注意的地方。下一篇我來講一下如何使用一種跨瀏覽器方式同時獲取內聯樣式，動態設定樣式，使用者代理以及樣式表設定的樣式。也是常用的一種方式。還有各自獲取的優先順序。
【責任編輯：龐桂玉 TEL：（010）68476606】