如何获取页面中任意元素的offsetLeft和offsetTop
2013-11-20 17:49
423 查看
这个功能前几天写过一次,今天再写一次居然花了十几分钟,研究了一下,还是做个笔记吧。
我们知道,获取元素E的offsetLeft、offsetTop直接用E.offsetLeft/E.offsetLeft就可以了,但是当要获取多层嵌套的元素相对于body的左边距和上边距时,就需要用到下面的函数:
其中要注意的地方是:
1、obj!=window.document.body而不是obj!=window.body
2、obj=obj.offsetParent而不是obj=obj.parentNode
offsetParent是相对于obj最近的有定位的父级,obj的offsetLeft/offsetTop也正是相对于它而言的,需要注意。
以上代码经过本人测试可用,测试时请清除浏览器默认内外边距,因为不同浏览器的默认样式有所差异。
我们知道,获取元素E的offsetLeft、offsetTop直接用E.offsetLeft/E.offsetLeft就可以了,但是当要获取多层嵌套的元素相对于body的左边距和上边距时,就需要用到下面的函数:
<script> function getOffset(obj) //获取任意元素的offsetLeft/offsetTop值 { var arr=[] var offsetL=0 var offsetT=0 while(obj!=window.document.body&&obj!=null) { offsetL+=obj.offsetLeft offsetT+=obj.offsetTop obj=obj.offsetParent } arr.push(offsetL,offsetT) return arr } </script>
其中要注意的地方是:
1、obj!=window.document.body而不是obj!=window.body
2、obj=obj.offsetParent而不是obj=obj.parentNode
offsetParent是相对于obj最近的有定位的父级,obj的offsetLeft/offsetTop也正是相对于它而言的,需要注意。
以上代码经过本人测试可用,测试时请清除浏览器默认内外边距,因为不同浏览器的默认样式有所差异。
相关文章推荐
- javascript和Jq获取和设置页面元素到顶部、左部距离、宽高元素卷入部分(scroll、scrollTop、scrollLeft、offset、offsetTop、offsetLeft)
- JavaScript如何获取/计算页面元素的offset?
- getBoundingClientRect计算页面元素的offsetLeft、offsetTop
- getBoundingClientRect计算页面元素的offsetLeft、offsetTop
- 获取元素在页面中left,top值(忽略其父级的定位)
- JS基础篇--JS获取元素的宽高以及offsetTop,offsetLeft等的属性值
- WebDriver 如何获取页面中的隐藏元素(悬浮菜单)
- 如何跨 frame 获取页面元素和函数
- 获取任意Html元素与body之间的偏移距离 offsetTop、offsetLeft (For:IE5+ FF1 )[
- js获取任意元素到页面的距离
- 如何获取页面中内嵌frame中的元素
- 如何自动获取网页页面元素的xpath(基于火狐浏览器)
- html--offsetLeft,Left,clientLeft的关键--动态获取计算元素位置关系
- 获取页面某一元素的绝对X,Y坐标,可以用offset()方法
- WebDriver 如何获取页面中的隐藏元素(悬浮菜单)
- js 子页面如何获取父级页面的元素
- 获取任意Html元素与body之间的偏移距离 offsetTop、offsetLeft
- 元素页面位置[left,top]获取
- 当webbrowser页面元素菜没有id和name时如何获取元素
- 如何在JSP页面使用JSTL标签获取List的元素个数