获取元素相对于另一个元素的位置

lio_zero

于 2021-10-18 22:36:32 发布

阅读量1k

点赞数

本文链接：https://blog.csdn.net/weixin_46267040/article/details/125369890

版权

该博客介绍了如何使用JavaScript获取两个HTML元素相对于视口的坐标，并计算它们之间的顶部和左侧的相对位置。通过调用getBoundingClientRect()方法获取元素的边界信息，然后简单相减即可得出元素间的相对距离。

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

测量 ele 元素相对于 target 元素的顶部和左侧位置：

// 获取两个元素距视口的坐标
const eleRect = ele.getBoundingClientRect()
const targetRect = ele.getBoundingClientRect()

// 计算顶部和左侧的位置
const top = eleRect.top - targetRect.top
const left = eleRect.left - targetRect.left