Question

我正在尝试确定什么是了解元素相对于另一个元素的“视觉”位置（不是DOM树位置）的最佳方式。

例如，我有一个元素数组，并且我有一个slected元素，并想知道哪些元素在视觉上位于所选元素的右侧。

另请注意，元素可以是任何标记类型，并且可以具有任何位置（相对，绝对，固定）和显示（只要它是可见的）。

欢迎任何jQuery解决方案。

Answer 1

为什么不简单地使用element.offsetTop和element.offsetLeft，其中offsetTop是y轴，offsetLeft是x轴。
根本不需要jQuery，但如果你坚持$(element).offset();可能会这样做。

请注意，窗口的左上角是0-0点。 “卡在”左侧的元素将为offsetLeft === 0，向上方标记的元素为offsetTop === 0。这就是全部，真的

回应zeaklous'评论：
获取对象的维度：

var dimension = {top:    {x:  element.offsetLeft, y: element.offsetTop},
                 bottom: {x: element.offsetWidth, y: element.offsetHeight}
};

请注意，已知offsetWidth和offsetHeight在刚刚重绘DOM的某些情况下会返回0（从刚刚更改的元素中获取这些属性会导致此情况）。
为了避免这种情况，有些人在获得他们怀疑可能已被改变的元素的偏移时倾向于使用setTimeout();。

在回复评论时，我们被指出您只需使用getBoundingClientRect即可避免offsetX属性出现任何问题：

document.getElementById('foo').getBoundingClientRect();

这将返回ClientRect对象的一个实例，您可以使用该实例进行播放。 Check MDN for details

如何确定HTML元素是否在另一个元素的左侧，右侧，顶部或底部是可见的？

1 个答案: