通过javascript获取元素的位置

时间:2009-11-20 10:25:10

标签: javascript position margin absolute

我已经看过十几个脚本可以捕获页面中元素/对象的x和y位置。但是当网页在主体上使用边距或其他元素,绝对/相对元素时,我总是遇到捕捉x和y的问题。

无论使用何种边距或填充,都能提供确切位置的解决方案。

:)

4 个答案:

答案 0 :(得分:12)

我使用以下代码移动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],

答案 1 :(得分:10)

获取确切位置只是将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快两倍,因为我们只循环一次。

答案 2 :(得分:1)

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>
不要担心......无论元素有多少边距或位置或填充,它总是有效

答案 3 :(得分:0)

你的代码非常糟糕,而且我对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时停止1}}和rel也是undefined,因此非严格的平等是有目的的,不会改变它。它还返回一个对象,因为它在使用中比数组更具可读性(因此您可以执行类似getPos().x的操作)。

这是源于Pacerier的解决方案,所以如果您要提出这个问题,请考虑提升他的意见。