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的宽度
//获取元素的纵坐标（相对于窗口）
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;
}
之前也写过一篇JS关于获取元素位置的文章：JS获取元素的offsetTop,offsetLeft等属性，我们可以通过offsetTop和offsetLeft属性获取元素相对窗口的位置，但offsetTop和offsetLeft属性都是相对于父元素定位的，而通常需要获取位置的元素都不是在最外层，所以遍历上级元素的offset相关属性少不了。那效率就成问题了。
//获取元素的纵坐标（相对于窗口）
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;
}
好在浏览器给我提供了相应的接口getBoundingClientRect，这个方法最早出现在IE浏览器中，后来的浏览器也跟着支持了这个方法，而且还更加完善，IE中只能获取到元素的left,top,bottom,right的属性，而后面的现代浏览器还能获取到元素的width和
| Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|
| 1.0 | 3.0 (1.9) | 4.0 | (Yes) | 4.0 |
这里要注意的是，bottom是元素底部相对于窗口顶部的距离，而不是像css里面position的bottom相对于窗口底部，同理，rihgt属性是元素最右边相对于窗口左边的距离。
var box = document.getElementById("box");
var pos = box.getBoundingClientRect();
box.innerHTML = "top:"+pos.top +
"left:"+pos.left +
"bottom:"+pos.bottom +
"right:"+pos.right +
"width:"+pos.width +
"height:"+pos.height
原创文章，转载请注明： 转载自前端开发
相关文章
这篇文章主要介绍了JS实现给json数组动态赋值的方法,结合实例形式分析了javascript针对json数组的遍历、赋值等常用操作技巧,需要的朋友可以参考下2017-07-07
下面小编就为大家带来一篇浅谈js中对象的使用。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-08-08
这篇文章主要介绍了JavaScript监听触摸事件代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-12-12
Bootstrap Paginator+PageHelper实现分页效果
这篇文章主要为大家详细介绍了Bootstrap Paginator+PageHelper实现分页效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-12-12
这篇文章主要介绍了js选项卡的实现方法,实例分析了js选项卡的实现思路及html+css布局与js功能技巧,非常具有实用价值,需要的朋友可以参考下2015-02-02
这篇文章主要介绍了JS实现获取自定义属性data值的方法,结合实例形式较为详细的分析了javascript针对自定义属性data的相关操作技巧,需要的朋友可以参考下2018-12-12
我的模板系统升一下级, 继续在新公司里面用。 现在几在互联网公司没有不用javascript模板了， 什么TX， 百度， 新浪， 360什么的， 最后瀑布流的流行， 里面又有许多用到模板2012-03-03
这篇文章主要介绍了JavaScript事件委托技术,实例分析了事件委托技术的原理、适用场合及用法实例,需要的朋友可以参考下2015-02-02
百叶窗下拉菜单效果非常棒，今天小编给大家分享一段js代码实现类似百叶窗下拉菜单效果，需要的朋友参考下2016-12-12
这篇文章主要介绍了JS实现匀速运动的代码实例，有需要的朋友可以参考一下2013-11-11
最新评论