【記錄】Javascript擷取Dom元素位置

有時候項目中會用到用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};

}

查看DEMO-樣本 

猛擊這裡，來看看我的位置

注:元素相容Chrome,FireFox,IE8.0+,Safari