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

本文介绍了一种在网页中准确获取元素绝对位置的方法。通过遍历元素及其父元素的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;
}
    
 

 

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值