通过 JavaScript 获取元素的位置

Posted 2023-03-06

【中文标题】通过 JavaScript 获取元素的位置

【英文标题】：Get position of element by 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。