javascript - 获取 div/span 标签的位置

Question

谁能告诉我如何获得 div 或 span 元素的 top 和 left 位置一个没有指定？

即:

<span id='11a' style='top:55px;' onmouseover="GetPos(this);">stuff</span>
<span id='12a' onmouseover="GetPos(this);">stuff</span>

在上面，如果我这样做:

document.getElementById('11a').style.top

55px 的值被返回。但是，如果我为 span '12a' 尝试这样做，则不会返回任何内容。

我在一个页面上有一堆 div/span，我无法指定 top/left 的属性，但我需要直接在该元素下显示一个 div。

Answer 1

您可以在对元素的引用上调用方法 getBoundingClientRect()。然后您可以检查 top、left、right 和/或 bottom 属性...

var offsets = document.getElementById('11a').getBoundingClientRect();
var top = offsets.top;
var left = offsets.left;

如果使用 jQuery，您可以使用更简洁的代码...

var offsets = $('#11a').offset();
var top = offsets.top;
var left = offsets.left;