如何在JavaScript中获取div相对于父级div而非视口的X/Y坐标？

有两种常用方法可以实现这个需求：

方法一：通过视口位置差值计算 #

利用getBoundingClientRect()分别获取父、子元素相对于视口的位置，再计算差值，同时处理父元素滚动的情况：

const parent = document.getElementById('parent');
const child = document.getElementById('child');

// 获取元素相对于视口的位置信息
const parentRect = parent.getBoundingClientRect();
const childRect = child.getBoundingClientRect();

// 计算基础相对坐标（父元素无滚动时直接用这个）
let relativeX = childRect.left - parentRect.left;
let relativeY = childRect.top - parentRect.top;

// 如果父元素有滚动条，修正坐标
relativeX += parent.scrollLeft;
relativeY += parent.scrollTop;

console.log(`相对X：${relativeX}px，相对Y：${relativeY}px`);

方法二：利用offsetLeft/offsetTop（需设置父元素定位） #

给父元素设置position: relative，让它成为子元素的offsetParent，之后直接读取子元素的offsetLeft和offsetTop即可：

首先给父元素添加CSS样式：

#parent {
  position: relative;
  /* 其他自定义样式 */
}

然后获取坐标：

const child = document.getElementById('child');

const relativeX = child.offsetLeft;
const relativeY = child.offsetTop;

console.log(`相对X：${relativeX}px，相对Y：${relativeY}px`);

注意事项 #

• 若父元素有内边距（padding），offsetLeft/offsetTop是从父元素内边距内侧开始计算的，而方法一的差值是从父元素边框外侧到子元素边框外侧的距离，按需选择即可
• 如果元素使用了transform属性，getBoundingClientRect()会考虑变换后的位置，而offsetLeft/offsetTop不会受transform影响

内容的提问来源于stack exchange，提问作者Jean