通过javascript获取元素的位置

Question

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

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

:)

Answer 1

我使用以下代码移动div框以跟随此Web IME站点中的光标

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],

Answer 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];
}

顺便说一句,这个解决方案可能比上面的其他解决方案快两倍,因为我们只循环一次.

Answer 3

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>

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