如何获取一个dom元素的绝对位置

iteye_11097

于 2011-05-18 12:05:56 发布

阅读量2k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端技术文章标签： javascript java 前端 ViewUI

本文链接：https://blog.youkuaiyun.com/iteye_11097/article/details/82066177

前端技术专栏收录该内容

52 篇文章

订阅专栏

本文介绍了一种在网页中准确获取元素绝对位置的方法。通过遍历元素及其父元素的offsetLeft和offsetTop属性，可以实现鼠标滑过时信息标签的精确定位。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

应用场景：鼠标滑过某元素时，需要弹出一个信息标签，标签的位置要根据滑过元素的位置而定。

难点：目标元素并不一定是absolute的，因此不能简单的通过top，left这种属性获取。元素可能包裹在n个父元素内，需要把这些因素都考虑进去。

解决思路：先获取该元素的offsetLeft和offsetTop，然后取它的offsetParent，并向外循环，累加这些left和top，最后得到的就是元素的绝对位置。

代码：

var obj = xxx; //这个元素就是目标元素，你可以用任何方式将它传入。

var w = obj.offsetWidth, h = obj.offsetHeight;

//从目标元素开始向外遍历，累加top和left值
for (var t = obj.offsetTop, l = obj.offsetLeft; obj = obj.offsetParent;) {
    	t += obj.offsetTop;
        l += obj.offsetLeft;
}