如何获取div/span标记的位置?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (17)

可有人告诉我如何得到topleft位置的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直接在该元素下面显示。

提问于
用户回答回答于

此函数将告诉你元素相对于页面的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;

要将一个元素直接放在这个元素的下面,你还需要知道它的高度。它存储在偏移量/偏移宽度属性中。

var yPositionOfNewElement = el.offsetTop + el.offsetHeight + someMargin;
用户回答回答于

你可以getBoundingClientRect()通过对该元素的引用调用该方法。然后,你可以检查topleftright和/或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;

扫码关注云+社区