Javascript 获取div/span标记的位置

如果未指定

div

或

span

元素的

顶部

和

左侧

位置，是否有人可以告诉我如何获取该位置

即：

返回

55px

的值。但是，如果我尝试对

span

'12a'执行此操作，则不会返回任何结果

---

我在一个页面上有一堆

div

/

span

s，我无法为其指定

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（）

。然后，您可以检查

顶部

、

左侧

、

右侧

和/或

底部

属性

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;

---

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

及

---

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

element.getBoundingClientRect（）

与jQuery的

$（element.offset（）

而且它与IE4+兼容。。。

---

而@nickf的答案有效。如果不喜欢较旧的浏览器，可以使用此纯Javascript版本。在IE9+和其他应用程序中工作

var rect = el.getBoundingClientRect();

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

---

不幸的是，当元素位于带有边框的表中时，该方法在Chrome中失败。在IE6标准模式下，由于机身边距的原因，它也会失败。这只是对该代码用户的一个警告。这是相对于页面而不是窗口的。如果用户使用滚动条四处滚动，则返回相同的值。小心点。谢谢@IsaacBolinger刚刚注意到了。有人能告诉我，当窗口调整大小或用户滚动时，如何让它更改值吗？@DavidFariña我使用了dojo的几何模块“domgeometry”。我不知道如何在本机上实现。否决-这对更有经验的用户来说可能很明显，但您尚未指定el需要传递的确切内容（即，请提供示例用法）。+1对于此答案，应使用

getBoundingClientRect（）

，这应该是公认的答案！但是，您不需要“现代浏览器”来工作，请参阅我在此处显示的兼容性列表：。它在IE 4.0+（！）、Chrome 1.0+、FF 3.0+、Safari 4.0+和Opera中运行良好。请注意，

getBoundingClientRect（）

返回的是相对于视口的值，而不是相对于文档的值。为此，您需要类似于

top=el.getBoundingClientRect（）.top+window.pageYOffset-el.ownerDocument.documentElement.clientTop

的内容。还要注意，

getBoundingClientRect

考虑了

transform

。如果第一个非绝对定位的子级具有页边距top或页边距left，这是不准确的。目前此页面上没有准确的解决方案，因此如果有人知道，请发布答案。您需要包括页面滚动偏移量

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

var rect = el.getBoundingClientRect();

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