【记录】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