获取每个 offsetParent 或总 offSetTop 和总 offSetLeft

【问题标题】：Getting every offsetParent or the total offSetTop and total offSetLeft获取每个 offsetParent 或总 offSetTop 和总 offSetLeft
【发布时间】：2012-02-04 18:30:49
【问题描述】：

我想得到一个子元素的总offSetTop和总offSetLeft，它们有很多级别的父元素并且可能会加起来。

除了手动逐一添加之外，还有什么速记方式吗？

【问题讨论】：

这似乎是一个不错的脚本quirksmode.org/js/findpos.html

标签： javascript jquery offset offsetof

【解决方案1】：

要在没有 jQuery 的情况下提供答案：

var a = Element, b = 0, c = 0;
while (a) {
    b += a.offsetLeft;
    c += a.offsetTop;
    a = a.offsetParent;
}

其中Element 是您需要offsetLeft 和offsetTop 的元素节点。

【讨论】：

效果很好 :) 但对我来说，c += a.offsetTop - a.scrollTop; 会产生正确的位置，以防某些父母滚动。

【解决方案2】：

使用 jQuery：$( node ).offset() 然后 .top 和 .left

【讨论】：

【解决方案3】：

https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect

如果您需要相对于文档左上角的边界矩形，只需将当前滚动位置添加到 top 和 left 属性（这些可以使用 window.scrollX 和 window.scrollY 获得）以获得边界与当前滚动位置无关的矩形。

let { left, top } = domNode.getBoundingClientRect();
left += window.scrollX;
top += window.scrollY;

【讨论】：