Find X/Y of an HTML element with JavaScript

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

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

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

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

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/