40

How can I find the XY coordinates of an HTML element (DIV) from JavaScript if they were not explicitly set?

Improve this question
1

6 Answers 6

Reset to default
34

Here's how I do it:

// Based on: http://www.quirksmode.org/js/findpos.html
var getCumulativeOffset = function (obj) {
    var left, top;
    left = top = 0;
    if (obj.offsetParent) {
        do {
            left += obj.offsetLeft;
            top  += obj.offsetTop;
        } while (obj = obj.offsetParent);
    }
    return {
        x : left,
        y : top
    };
};
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

I think I prefer your idea of returning an object over Peter-Paul Koch's choice of returning an array in his original solution.
9

That can be tricky depending on browser and version. I would suggest using jQuery and the positions plugin.

Improve this answer

2 Comments

Most of the positions plugin is now part of jQuery core. So you can just do $(element).offset({relativeTo: "body"}) - and it will give you the top and left of the object relative to the body.
Excellent, I haven't downloaded jQuery in a few months, good to know they rolled it in.
7

You can use a library such as Prototype or jQuery, or you can use this handy function:

It returns an array.

myPos = findPos(document.getElementById('something'))
x = myPos[0]
y = myPos[1]

function findPos(obj) {
  var curleft = curtop = 0;
  if (obj.offsetParent) {
    curleft = obj.offsetLeft
    curtop = obj.offsetTop
    while (obj = obj.offsetParent) {
      curleft += obj.offsetLeft
      curtop += obj.offsetTop
    }
  }
  return [curleft,curtop];
}
Improve this answer

1 Comment

You should give the attribution to quirksmode.org, that function looks very familiar.
3

For what it's worth, here's a recursive version:

function findPos(element) {
  if (element) {
    var parentPos = findPos(element.offsetParent);
    return [
      parentPos.X + element.offsetLeft,
      parentPos.Y + element.offsetTop
    ];
  } else {
    return [0,0];
  }
}
Improve this answer

1 Comment

parentPos.X should be parentPos[0], parentPos.Y should be parentPos[1]
2

You can add two properties to the Element.prototype to get top/left of any element.

window.Object.defineProperty( Element.prototype, 'documentOffsetTop', {
    get: function () { return this.offsetTop + ( this.offsetParent ? this.offsetParent.documentOffsetTop : 0 ); }
} );

window.Object.defineProperty( Element.prototype, 'documentOffsetLeft', {
    get: function () { return this.offsetLeft + ( this.offsetParent ? this.offsetParent.documentOffsetLeft : 0 ); }
} );

Here's a demo comparing the results to jQuery's offset().top and .left: http://jsfiddle.net/ThinkingStiff/3G7EZ/

Improve this answer

Comments

-1

I am not sure what you need it for, and such things are always relative (screen, window, document). But when I needed to figure that out, I found this site helpful: http://www.mattkruse.com/javascript/anchorposition/source.html

And I also found that the tooltip plugin someone made for jQuery had all sorts of interesting insight to x,y positioning tricks (look at its viewport class and the underlying support jQuery provides for it). http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/

Improve this answer

Comments