获取div / span标签的位置
有人可以告诉我如何得到一个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 / span在页面上，我不能指定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;
正如Alex指出的，你可以使用jQuery offset（）来获取相对于文档stream的位置。 使用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; }
@ nickf的答案是有效的。 如果你不喜欢旧的浏览器，你可以使用这个纯粹的Javascript版本。 在IE9 +和其他工作
var rect = el.getBoundingClientRect(); var position = { top: rect.top + window.pageYOffset, left: rect.left + window.pageXOffset };
我意识到这是一个古老的线索，但@alex的答案需要被标记为正确的答案
element.getBoundingClientRect()与jQuery的$(element).offset()完全匹配
它与IE4 +兼容… https://developer.mozilla.org/en-US/docs/Web/API/Element.getBoundingClientRect
