js中style,currentStyle和getComputedStyle的區別

liqingyu1995發表於2016-11-01
JS
<style>
    body{margin:0 auto;text-align:center;}
    div{position:relative;left:10px;}
</style>
<div id="pic1">
    img src="02362982432fa1b14e.jpg">
<script>
    var dom1 = document.getElementByIdx_x('pic1');
    console.log(dom1.style.left);
</script>
控制檯中顯示為空。 

style只能獲取元素的內聯樣式，內部樣式和外部樣式使用style是獲取不到的。
currentStyle可以彌補style的不足，但是只適用於IE。
getComputedStyle同currentStyle作用相同，但是適用於FF、opera、safari、chrome。

寫了個getStyle的自定義函式，來相容ie和其他瀏覽器，使用getStyle來獲取頁面中元素的樣式，問題解決。
getElementStyle: function(el,attr){
//獲取el當前的attr樣式，解決ie問題
    return el.currentStyle?el.currentStyle[attr]:getComputedStyle(el,null)[attr];
}
獲取後返回10px。

注意：
currentStyle和getComputedStyle只能用於獲取頁面元素的樣式，不能用來設定相關值。
如果要設定相應值，應使用style。

相關文章