如何获取元素最终使用的css值
這個問題是在組件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！
歡迎大家提出寶貴意見。
轉載于:https://www.cnblogs.com/yupeng/archive/2012/05/23/2512485.html
總結
以上是生活随笔為你收集整理的如何获取元素最终使用的css值的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： JQuery 基础：8.节点操作
- 下一篇： 【HDU】3308 LCIS