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.

这里要注意的是，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

JS获取元素在页面的位置

原文：https://www.cnblogs.com/soundcode/p/13976729.html