获取div/span标记的位置

可有人告诉我如何得到top和left位置的div或者span当没有指定的元素吗？

即:

stuff
stuff

在上面,如果我这样做:

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

55px返回值.但是,如果我尝试span'12a',那么什么都不会返回.

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

1> alex..：

---

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

---

请注意,`getBoundingClientRect()`返回相对于视口的值,而不是文档.为此,你需要像`top = el.getBoundingClientRect().top + window.pageYOffset - el.ownerDocument.documentElement.clientTop`这样的东西.

---

这个答案的+1,应该使用`getBoundingClientRect()` - 这应该是接受的答案!但是你不需要一个_"现代浏览器"来实现这一点,请参阅我在这里展示的兼容性列表:http://stackoverflow.com/questions/1480133/how-can-i-get-an-objects-绝对位置上的页式的JavaScript/16626843#16626843.它在IE 4.0+(!),Chrome 1.0 +,FF 3.0 +,Safari 4.0+和Opera中运行良好.

2> nickf..：

---

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

---

不幸的是,当元素位于带边框的表格内时,此方法在Chrome中失败.由于BODY边距,它在IE6标准模式下也会失败.

3> Benjamin Int..：

---

虽然@ nickf的答案有效.如果您不关心旧版浏览器,则可以使用此纯Javascript版本.适用于IE9 +等

var rect = el.getBoundingClientRect();

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

4> Dylan Valade..：

---

正如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 );
});

5> Jens Frandse..：

---

对于只需要顶部或左侧位置的人来说,对@ 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;
}