获取div / span标签的位置

Question

有人可以告诉我未指定a 或元素的top＆left位置吗？div``span

即：

<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/ spans，我无法为其指定top/ left属性，但是我需要div在该元素的正下方显示一个。

Answer 1

此函数将告诉您元素相对于页面的x，y位置。基本上，您必须遍历所有元素的父级并将其偏移量加在一起。

function getPos(el) {
    // yay readability
    for (var lx=0, ly=0;
         el != null;
         lx += el.offsetLeft, ly += el.offsetTop, el = el.offsetParent);
    return {x: lx,y: ly};
}

但是，如果您只是想要元素相对于其容器的x，y位置，那么您所需要做的就是：

var x = el.offsetLeft, y = el.offsetTop;

要将元素直接放在该元素的下方，您还需要知道其高度。这存储在offsetHeight / offsetWidth属性中。

var yPositionOfNewElement = el.offsetTop + el.offsetHeight + someMargin;