获取div / span标签的位置

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

即：

<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;

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

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

您可以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;

虽然@nickf的答案有效。如果您不喜欢较旧的浏览器，则可以使用此纯Javascript版本。可以在IE9 +和其他版本中使用

var rect = el.getBoundingClientRect();

var position = {
  top: rect.top + window.pageYOffset,
  left: rect.left + window.pageXOffset
};

如Alex所述，您可以使用jQuery offset（）获取相对于文档流的位置。使用position（）作为其相对于父对象的x，y坐标。

编辑：切换document.ready，window.load因为load等待所有元素，所以您得到它们的大小，而不是简单地准备DOM。以我的经验，load会减少Javascript定位元素的错误。

$(window).load(function(){ 
  // Log the position with jQuery
  var position = $('#myDivInQuestion').position();
  console.log('X: ' + position.left + ", Y: " + position.top );
});

对于只需要顶部或左侧位置的任何人，只需对@Nickf的可读代码进行一些修改即可解决问题。

function getTopPos(el) {
    for (var topPos = 0;
        el != null;
        topPos += el.offsetTop, el = el.offsetParent);
    return topPos;
}

和

function getLeftPos(el) {
    for (var leftPos = 0;
        el != null;
        leftPos += el.offsetLeft, el = el.offsetParent);
    return leftPos;
}

我意识到这是一个旧线程，但是@alex的答案需要标记为正确的答案

element.getBoundingClientRect() 与jQuery完全匹配 $(element).offset()

并且与IE4 +兼容... https://developer.mozilla.org/zh-CN/docs/Web/API/Element.getBoundingClientRect