javascript - 如何确定一个 HTML 元素是否在视觉上位于另一个元素的左侧、右侧、顶部或底部？

Question

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

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

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

欢迎使用任何 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