获取div/span标记的位置
获取div/span标记的位置
提问于 2008-11-13 23:07:16
谁能告诉我，当一个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。
回答 6
Stack Overflow用户
回答已采纳
发布于 2008-11-13 23:11:51
此函数将告诉您元素相对于页面的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;Stack Overflow用户
发布于 2008-11-13 23:23:54
可以在对元素的引用上调用方法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;Stack Overflow用户
发布于 2015-06-20 09:31:36
而@nickf的答案是有效的。如果你不喜欢老版本的浏览器，你可以使用这个纯Javascript版本。在IE9+和其他应用程序中工作
var rect = el.getBoundingClientRect();
var position = {
top: rect.top + window.pageYOffset,
left: rect.left + window.pageXOffset
};页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/288699
复制相关文章
相似问题