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获取元素相对窗口位置的实现代码
- Author -
前端开发声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@