有人可以告诉我如何在未指定 div 或 span 元素的情况下获取 top 和 left 位置吗？
即：
<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。
【问题讨论】：
标签： javascript html
虽然@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 );
});
【讨论】：
我意识到这是一个旧线程，但 @alex 的答案需要标记为正确答案
element.getBoundingClientRect() 与 jQuery 的 $(element).offset() 完全匹配
而且它兼容 IE4+ ... https://developer.mozilla.org/en-US/docs/Web/API/Element.getBoundingClientRect
【讨论】：
您可以在对元素的引用上调用方法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() - 这应该是公认的答案！但您不需要 “现代浏览器” 即可使用，请参阅我在此处显示的兼容性列表：stackoverflow.com/questions/1480133/…。它在 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 考虑在内。
对于只需要顶部或左侧位置的任何人，对@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;
}
【讨论】：
这个函数会告诉你元素相对于页面的 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;
【讨论】：