JS獲取元素在頁面的位置

JS獲取元素的offsetTop,offsetLeft等屬性
obj.clientWidth //獲取元素的寬度（width+padding）
obj.clientHeight //元素的高度
obj.offsetLeft //元素相對於父元素的left
obj.offsetTop //元素相對於父元素的top
obj.offsetWidth //元素的寬度(width+padding+border)
obj.offsetHeight //元素的高度

//獲取元素的縱坐標（相對於窗口）

1.  
   function getTop(e){
2.  
   var offset=e.offsetTop;
3.  
   if(e.offsetParent!=null) offset+=getTop(e.offsetParent);
4.  
   return offset;
5.  
   }

//獲取元素的橫坐標（相對於窗口）

1.  
   function getLeft(e){
2.  
   var offset=e.offsetLeft;
3.  
   if(e.offsetParent!=null) offset+=getLeft(e.offsetParent);
4.  
   return offset;
5.  
   }

上面的方法無疑影響性能，好在瀏覽器給我提供了相應的接口getBoundingClientRect，這個方法最早出現在IE瀏覽器中，后來的瀏覽器也跟着支持了這個方法，而且還更加完善，IE中只能獲取到元素的left,top,bottom,right的屬性，而后面的現代瀏覽器還能獲取到元素的width和height.

Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
1.0	3.0 (1.9)	4.0	(Yes)	4.0

這里要注意的是，bottom是元素底部相對於窗口頂部的距離，而不是像css里面position的bottom相對於窗口底部，同理，rihgt屬性是元素最右邊相對於窗口左邊的距離。

 

1.  
   var box = document.getElementById("box");
2.  
   var pos = box.getBoundingClientRect();
3.  
   box.innerHTML = "top:"+pos.top +
4.  
   "left:"+pos.left +
5.  
   "bottom:"+pos.bottom +
6.  
   "right:"+pos.right +
7.  
   "width:"+pos.width +
8.  
   "height:"+pos.height