Get position of element by javascript

Question

I've seen a dozen of script that can catch the x and y position of an element/object within the page. But i am always having trouble with catching the x and y when the webpage is using margins at the body, or other elements, absolute/relative elements, such like that.

Is there a solution wich provides the exact position, no matter what margins or paddings are used.

:)

Answer 1

Getting the exact position is simply a matter of adding the offsetLefts and offsetTops recursively to the 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];
}

Btw, this solution would probably run twice faster than the other solution above since we only loop once.

Answer 2

I use following code to move div box to follow cursor in this 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];
}

Its return an array [left,top],

Answer 3

YOU's code is downright bad, and I've some improvements on Pacerier's to give, so I'll post my own answer:

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

If is just used as getPos(myElem) will return global position. If a second element is included as an argument (i.e. getPos(myElem, someAncestor)) that is an ancestor/parent of the first (at least somewhere up the chain) then it will give the position relative to that ancestor. If rel is not given (i.e. is left undefined), then it purposefully uses != instead of !== because it should stop when el gets to null and rel is undefined as well, so the non-strict equality is purposeful, don't change it. It also returns an object, since that's a bit more readable in usage than an array (and so you can do something like getPos().x).

This is derived from Pacerier's solution, so if you're gonna upvote this, consider upvoting his too.

Answer 4

offsetParent and other offset functions are old... use the getBoundingClientRect function... use this:

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

now you can use it like this

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

Don't worry... no matter how much margin or position or padding the element has, it always works