通过 JavaScript 获取元素的位置答案

【问题标题】：Get position of element by JavaScript通过 JavaScript 获取元素的位置
【发布时间】：2010-12-18 16:21:26
【问题描述】：

我见过很多可以捕捉页面内元素/对象的 x 和 y 位置的脚本。但是当网页在正文或其他元素、绝对/相对元素等使用边距时，我总是无法捕捉 x 和 y。

无论使用什么边距或填充，是否有提供准确位置的解决方案？

【问题讨论】：

【解决方案1】：

我使用以下代码将 div 框移动到 Web IME site 中跟随光标

function xy(x) {
    o = document.getElementById(x);
    var l =o.offsetLeft; var t = o.offsetTop;
    while (o=o.offsetParent)
        l += o.offsetLeft;
    o = document.getElementById(x);
    while (o=o.offsetParent)
        t += o.offsetTop;
    return [l,t];
}

它返回一个数组[left,top]，

【讨论】：

嗨，马克，感谢您的代码，但是当页面在正文处有边距时，位置不再正确，您有解决方案吗？提前致谢
在返回值中添加document.body.offsetLeft 和document.body.offsetTop 怎么样？
无论正文边距如何，这都应该可以正常工作。确保您使用的是标准模式文档类型。在 Quirks 中，所有的赌注都被取消了。
谢谢马克，我会试试那个！ @Bobince，我无法控制将发布此代码的网站，这是交互式广告的一部分。
如果可以在一个循环中同时获得offsetLeft 和offsetTop，为什么还要向上遍历DOM 树两次？

【解决方案2】：

获取确切位置只需将 offsetLefts 和 offsetTops 递归添加到 offsetParents：

function getPos(ele){
    var x=0;
    var y=0;
    while(true){
        x += ele.offsetLeft;
        y += ele.offsetTop;
        if(ele.offsetParent === null){
            break;
        }
        ele = ele.offsetParent;
    }
    return [x, y];
}

顺便说一句，这个解决方案的运行速度可能比the other solution above 快两倍，因为我们只循环一次。

【讨论】：

@YOUs 的代码可以大大简化，使它们大致相同，而他的代码会更简洁。

【解决方案3】：

你的代码非常糟糕，我对 Pacerier 的代码有一些改进，所以我会发布我自己的答案：

function getPos(el, rel)
{
    var x=0, y=0;
    do {
        x += el.offsetLeft;
        y += el.offsetTop;
        el = el.offsetParent;
    }
    while (el != rel)
    return {x:x, y:y};
}

如果只是用作getPos(myElem) 将返回全局位置。如果包含第二个元素作为参数（即getPos(myElem, someAncestor)），它是第一个元素的祖先/父级（至少在链上的某处），那么它将给出相对于该祖先的位置。如果没有给出rel（即留下undefined），那么它会故意使用!= 而不是!==，因为当el 到达null 并且rel 是undefined 时它应该停止好吧，所以非严格相等是有目的的，不要改变它。它还返回一个对象，因为它在使用上比数组更具可读性（因此您可以执行getPos().x 之类的操作）。

这是来自 Pacerier 的解决方案，所以如果您要对此表示赞同，请考虑也支持他的解决方案。

【讨论】：

【解决方案4】：

offsetParent 和其他偏移函数是旧的......使用getBoundingClientRect 函数...使用这个：

function getAbsPosition(element) {
   var rect = element.getBoundingClientRect();
   return {x:rect.left,y:rect.top}
}

现在你可以像这样使用它了

<div style="margin:50px;padding:50px;" id="myEl">lol</div>
<script type="text/javascript">
    var coords = getAbsPosition( document.getElementById('myEl') );
    alert( coords.x );alert( coords.y );
</script>

别担心...无论元素有多少边距、位置或填充，它总是有效的

【讨论】：

这将根据当前滚动调整数字。因此，如果您向下滚动 50px，它将减少 50px。