javascript - 如何找到一个网页元素相对于另一个网页元素的位置？

Question

我有一个场景，我必须断言 Web 元素是否存在及其位置。更清楚地说，我有一个网络元素 X 和另一个网络元素 Y。现在我必须断言，单击按钮后我可以看到 X 位于 Y 上方。如何做到这一点？

Answer 1

您应该获取两个元素在文档中的位置，并从 Y 的值中减去 X 的位置值。如果该值是正数，则您知道 X 比 Y 坐得更远。

获取位置

使用

boxPositionOfX = getElementById(“myX”).getBoundingClientRect();
boxPositionOfY = getElementById(“myY”).getBoundingClientRect();

这将返回一个包含所有四个位置值的对象:top、right、bottom 和 left，相对到视口(viewport)。您不需要将视口(viewport)位置转换为文档位置，因为您必须添加的文档偏移量对于两个元素是相同的，并且将在减法中被剪切。

比较位置

现在减去他们的位置:

positionDifference = boxPositionOfY.top - boxPositionOfX.top;

如果positionDifference大于0，则X的上边框位于Y的上边框之上。

如果您想确保元素不重叠，请使用:

If ( (boxPositionOfY.top - boxPositionOfX.bottom) >= 0) {
    alert("X is above Y. They do not overlap.");
}