offsetLeft和style.left的區別

 發現這個問題,是在實現圖片向右滑動效果時,把圖片樣式設置在css style中,position設置為absolute,top設置為0,left設置為0,然后用js設置定時器,在setInterval里的參數函數里,我用了 im.style.left = parseInt(im.style.left) + 20 + "px"; 來實現圖片左邊距20px的遞增,但是運行一直實現不了,通過 console.log('im.style.left'+ im.style.left); ,卻一直打印不出來im.style.left的值,然后我把代碼替換成 im.style.left = im.offsetLeft + 20 + "px"; 就可以成功實現.不過令人奇怪的是,如果還是用上面那句代碼,然后把圖片im的style樣式嵌入img標簽里, <img src="" id="im" style = "position:absolute;top:0;left:0"/> 就可以實現了.

下面來總結下它們的區別:
1.定義:
offsetLeft: 獲取的是當前對象左側距離父對象左側的值(均不包含border);
 style.left: 獲取或設置相對於具有定位屬性(position定義為relative)的父對象的左邊距;
還有個clientLeft:獲取的是當前對象的offsetLeft屬性值和到當前窗口左邊的真實值之間的距離,. 

2.如果父對象的position定義為relative,子對象的position定義為absolute，那么子對象的style.left的值是相對於父對象的值,等同於offsetLeft的值.
3.區別:
- style.left 返回的是字符串"50px"，offsetLeft返回的是數值50，如果需要對取得的值進行計算，用offsetLeft比較方便,不需要用parseInt(style.left).
-  style.left是可以設置或更改，offsetLeft是只能獲取不能更改的，因此要改變子對象的位置，只能修改style.left的值。
-  style.left的值需要事先定義,而且要定義相應對象的標簽里(即內聯style)，就如上面用內嵌style的話，獲取不到style.left的值.但是offsetLeft則可以取到.