這個問題是在組件css載入方案中碰到的
情境：
元素的樣式我們可以寫在style裡面，也可以寫到外鏈css裡面，如果沒有設定，也會讀取瀏覽器預設的css的，現在我們要計算getComputedstyle某個元素的最終所使用的css樣式
區別：
1）style 是行內樣式的寫法，如果style 內有值的話，就會讀取出來，如果沒有，那麼就為空白，可讀可寫
2）getComputedstyle 是讀取元素的最終所使用的css的值，唯讀
解決方案：
在ie和非ie下是不一樣的處理辦法的。
在ie下：
通過element.currentStyle 可以獲得當前元素的樣式
非ie下：
通過 document.defaultView.getComputedStyle(element,null) 其實window下這個方法也是存在的,可以直接通過window.getComputeStyle 的方式調用
上述獲得的是該元素上所有使用的css樣式，但是如果要得到某個樣式呢？ 在非ie下，則可以再後面加上getPrototyValue('attr') 的辦法（ie9目前也支援了這個方法），
小於ie9的方法，目前可以通過2種方式獲得，第一種方式是在後面["attr"] ,第二種方式是 在後面加上getAttribute("attr")，不過這種方式要求駝峰的方式命名
綜上所述 擷取元素的最終所使用的css樣式可以這樣寫
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head> <title> New Document </title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> </head> <body> <div id="test" style="float:left;color:red;backgound-color:#ddd;height:300px;width:200px;">test</div> <script> function getCurrentStyle(ele,attr){ attr = (!-[1,]&& attr=="float")? "styleFloat" :"float"; if(document.defaultView){ var style = document.defaultView.getComputedStyle(ele,null); return style ? style.getPropertyValue(attr): null; }else{ return ele.currentStyle[attr]; } } var test = document.getElementById('test'); var style = getCurrentStyle(test,"float"); alert(style); </script> </body></html>
有一點需要注意，網上說對於float 這個屬性，在ie下是 styleFloat，在非ie下是cssFloat ，我在chrome17，firefox12下用cssFloat均沒有測試成功。於是我乾脆寫成“float”，ok！
歡迎大家提出寶貴意見。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
