获取 div/span 标记的位置

This function will tell you the x,y position of the element relative to the page. Basically you have to loop up through all the element's parents and add their offsets together.

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;

As Alex noted you can use jQuery offset() to get the position relative to the document flow. Use position() for its x,y coordinates relative to the parent.

编辑: 将 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/en-us/docs/web/api/element.getboundingclientrect

而@nickf 的回答起作用了。如果您不喜欢旧的浏览器，可以使用这个纯 Javascript 版本。可用于 IE9 + 等

var rect = el.getBoundingClientRect();


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