javascript - getBoundingClientRect 知道一个元素是否在一个特定的垂直点之上

Question

我正在使用 getBoundingClientRect 来了解元素是否在页面中的特定点之上。所以我这样做:

var rect = el.getBoundingClientRect();

if (rect.top < bottom_limit) {
   return true;
}

我认为这运行良好，但在一些调试中我发现某些元素对于所有顶部、底部、右侧、左侧都返回 0。例如:Example1和 Example2

<span id='a'>
    <span id='b'>This is some crazy text.</span>
</span>

#b {
    float: left;
}

和

#b {
    position: absolute;
}

我担心得到全零。为什么会这样？我可以相信这种方法可以完成我想要完成的事情吗？

Answer 1

您可以考虑使用 document.getBoxObjectFor(el)，或尝试使用 el.offsetTop/offsetLeft/offsetWidth/offsetHeight。认为它们可能只是 Mozilla，但不确定它们是否适用于非 block 级元素。