您的位置:首页 > 运维架构

如何获取页面中任意元素的offsetLeft和offsetTop

2013-11-20 17:49 423 查看
这个功能前几天写过一次,今天再写一次居然花了十几分钟,研究了一下,还是做个笔记吧。

我们知道,获取元素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也正是相对于它而言的,需要注意。

以上代码经过本人测试可用,测试时请清除浏览器默认内外边距,因为不同浏览器的默认样式有所差异。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  offsetLeft offsetTop