完全圖解scrollLeft,scrollWidth,clientWidth,offsetWidth 獲取相對途徑，滾動圖片

有時候項目中會用到用js獲取元素位置來定位元素，我在網上開了大量的   圖解，代碼，最終把我搞的暈了，還是結合網上的 自己來總結一下，首先來看看網上的：

DOM的定義如下圖

 

獲取元素的位置屬性可以通過

• HTMLElement.offsetLeft
• HTMLElement.offsetTop

但是，這兩個屬性所儲存的數值並不是該元素相對整個瀏覽器畫布的絕對位置，而是相對於其父元素位置的相對位置，也就是說這兩個數值得到的是以其 父元素左上角為(0,0)點從而計算出的數值。所以我們要得到她的絕對位置，那么我們必須依次向上獲取他的父元素的位置，然后獲取它父元素的父元素的offersetLeft和offersetTop,一直遞歸到瀏覽器的整個畫布橫縱距離的時候，例如（  一定注意是相對於父標簽的途徑！） 

 
                /*獲取元素的縱坐標*/
function getTop(e){
   var offset=e.offsetTop;
   if(e.offsetParent!=null){
     offset+=getTop(e.offsetParent);
   }         
   return offset;
}
/*獲取元素的橫坐標*/
function getLeft(e){
   var offset=e.offsetLeft;
   if(e.offsetParent!=null){
      offset+=getLeft(e.offsetParent);
   } 
   return offset;
}  
               

 獲取元素的絕對位置，無非是根據元素距瀏覽器左邊(left)和頂部（top）,我們可以稍稍改變一下得到一方法

 
               function getElemPos(obj){
        var pos = {"top":0, "left":0};
         if (obj.offsetParent){
           while (obj.offsetParent){
             pos.top += obj.offsetTop;
             pos.left += obj.offsetLeft;
             obj = obj.offsetParent;
           }
         }else if(obj.x){
           pos.left += obj.x;
         }else if(obj.x){
           pos.top += obj.y;
         }
         return {x:pos.left, y:pos.top};
 
              

}