获取 div/span 标记的位置

2022-08-30 05:27:22

有人可以告诉我如何在未指定或元素时获取或元素的&位置吗?topleftdivspan

结婚

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

在上面,如果我这样做:

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

返回 的值。但是,如果我尝试对“12a”进行此操作,则不会返回任何内容。55pxspan

我在一个页面上有一堆/s,我无法指定/属性,但我需要直接在该元素下显示一个。divspantopleftdiv


答案 1

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

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;

答案 2

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