js获取元素相对窗口位置的实现代码
JS获取元素的offsetTop,offsetLeft等属性
obj.clientWidth//获取元素的宽度
obj.clientHeight//元素的高度
obj.offsetLeft//元素相对于父元素的left
obj.offsetTop//元素相对于父元素的top
obj.offsetWidth//元素的宽度
obj.offsetHeight//元素的高度
区别：
clientWidth=width+padding
clientHeight=height+padding
offsetWidth=width+padding+border
offsetHeight=width+padding+border
offset比client多了border的宽度
//获取元素的纵坐标（相对于窗口）
functiongetTop(e){
varoffset=e.offsetTop;
if(e.offsetParent!=null)offset+=getTop(e.offsetParent);
returnoffset;
}
//获取元素的横坐标（相对于窗口）
functiongetLeft(e){
varoffset=e.offsetLeft;
if(e.offsetParent!=null)offset+=getLeft(e.offsetParent);
returnoffset;
}
之前也写过一篇JS关于获取元素位置的文章：JS获取元素的offsetTop,offsetLeft等属性，我们可以通过offsetTop和offsetLeft属性获取元素相对窗口的位置，但offsetTop和offsetLeft属性都是相对于父元素定位的，而通常需要获取位置的元素都不是在最外层，所以遍历上级元素的offset相关属性少不了。那效率就成问题了。
//获取元素的纵坐标（相对于窗口）
functiongetTop(e){
varoffset=e.offsetTop;
if(e.offsetParent!=null)offset+=getTop(e.offsetParent);
returnoffset;
}
//获取元素的横坐标（相对于窗口）
functiongetLeft(e){
varoffset=e.offsetLeft;
if(e.offsetParent!=null)offset+=getLeft(e.offsetParent);
returnoffset;
}
好在浏览器给我提供了相应的接口getBoundingClientRect，这个方法最早出现在IE浏览器中，后来的浏览器也跟着支持了这个方法，而且还更加完善，IE中只能获取到元素的left,top,bottom,right的属性，而后面的现代浏览器还能获取到元素的width和
| Chrome | Firefox(Gecko) | InternetExplorer | Opera | Safari |
|---|---|---|---|---|
| 1.0 | 3.0(1.9) | 4.0 | (Yes) | 4.0 |
这里要注意的是，bottom是元素底部相对于窗口顶部的距离，而不是像css里面position的bottom相对于窗口底部，同理，rihgt属性是元素最右边相对于窗口左边的距离。
varbox=document.getElementById("box");
varpos=box.getBoundingClientRect();
box.innerHTML="top:"+pos.top+
"left:"+pos.left+
"bottom:"+pos.bottom+
"right:"+pos.right+
"width:"+pos.width+
"height:"+pos.height
原创文章，转载请注明：转载自前端开发