Find X/Y of an HTML element with JavaScript [duplicate]

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

Answer 2

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

Answer 3

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/

Answer 4

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

Answer 5

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

Answer 6

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