我有一个场景,我必须断言 Web 元素是否存在及其位置。更清楚地说,我有一个网络元素 X 和另一个网络元素 Y。现在我必须断言,单击按钮后我可以看到 X 位于 Y 上方。如何做到这一点?
最佳答案
您应该获取两个元素在文档中的位置,并从 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.");
}
关于javascript - 如何找到一个网页元素相对于另一个网页元素的位置?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38074735/