如何准确获取元素相对于父元素的位置？

如何获取元素相对于父元素的位置

问题

在 Web 开发中，你经常需要获取元素相对于其父元素的位置。这在许多场景中很有用，例如，当你需要对悬停的元素进行定位时。

常见方法

获取元素相对于父元素位置的最常见方法是使用 getBoundingClientRect() 方法。此方法返回一个矩形对象，其中包含元素相对于视口的左、上、右和下边界。

但是，此方法有一个缺点：它不考虑父元素的滚动位置和定位。这意味着，如果你有一个父元素滚动或定位，则 getBoundingClientRect() 将返回相对于视口的坐标，而不是相对于父元素的坐标。

改进的方法

为了获得准确的元素相对于父元素的位置，你需要使用 getBoundingClientRect() 方法并从其返回的矩形中减去父元素的矩形。这将确保你获得相对位置，即使父元素已滚动或定位。

以下是改进后的 getBoundingClientRect() 函数：

function getBoundingClientRectRelativeToParent(element) {
  const elementRect = element.getBoundingClientRect();
  const parentRect = element.parentElement.getBoundingClientRect();
  return {
    left: elementRect.left - parentRect.left,
    top: elementRect.top - parentRect.top,
    right: elementRect.right - parentRect.left,
    bottom: elementRect.bottom - parentRect.top,
  };
}

使用此函数，你可以准确获取元素相对于其父元素的位置，即使父元素已滚动或定位。

示例

以下是使用改进后的 getBoundingClientRect() 函数的示例：

const element = document.getElementById('element');
const parentElement = element.parentElement;

const relativeRect = getBoundingClientRectRelativeToParent(element);

console.log(relativeRect);

输出：

{
  left: 10,
  top: 20,
  right: 110,
  bottom: 120,
}

如你所见，此函数返回了元素相对于其父元素的位置。

常见问题解答

• 为什么 getBoundingClientRect() 函数不考虑父元素的滚动位置和定位？

getBoundingClientRect() 函数返回相对于视口的坐标，而不是相对于父元素的坐标。这是因为该函数旨在为元素提供相对于视口的绝对位置。

• 如何使用 getBoundingClientRect() 函数获取元素相对于其父元素的位置？

要获得元素相对于其父元素的位置，你需要从 getBoundingClientRect() 返回的矩形中减去父元素的矩形。

• 改进后的 getBoundingClientRect() 函数适用于哪些浏览器？

改进后的 getBoundingClientRect() 函数适用于支持 getBoundingClientRect() 方法的所有现代浏览器。

• 我可以使用 getBoundingClientRect() 函数来获取元素相对于其任何祖先元素的位置吗？

不，getBoundingClientRect() 函数只能用于获取元素相对于其父元素的位置。

• 有没有其他方法可以获取元素相对于其父元素的位置？

是的，还有其他方法可以获取元素相对于其父元素的位置，例如 offsetParent 和 offsetTop、offsetLeft 属性。但是，这些方法不适用于所有浏览器，并且不如 getBoundingClientRect() 函数可靠。