40

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

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
  • closed as duplicate as per http://meta.stackexchange.com/questions/147643/should-i-vote-to-close-a-duplicate-question-even-though-its-much-newer-and-ha – user123444555621 Aug 25 '14 at 06:47

6 Answers6

33

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
    };
};
Andrew Hedges
  • 21,688
  • 16
  • 67
  • 79
  • I think I prefer your idea of returning an object over Peter-Paul Koch's choice of returning an array in his original solution. – cssimsek Jun 20 '14 at 07:51
9

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

palehorse
  • 26,407
  • 4
  • 40
  • 48
  • 9
    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. – Sugendran Oct 01 '08 at 23:32
  • Excellent, I haven't downloaded jQuery in a few months, good to know they rolled it in. – palehorse Oct 02 '08 at 14:01
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];
}
Zayn Ali
  • 4,765
  • 1
  • 30
  • 40
Diodeus - James MacFarlane
  • 112,730
  • 33
  • 157
  • 176
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];
  }
}
jjthrash
  • 126
  • 1
  • 3
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/

ThinkingStiff
  • 64,767
  • 30
  • 146
  • 239
-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/

wulimaster
  • 701
  • 5
  • 7