使用JavaScript查找HTML元素的X/Y

如果HTML元素（DIV）没有显式设置，如何从JavaScript中找到它们的XY坐标？

这可能会很棘手，具体取决于浏览器和版本。我建议使用和positions插件。

我不确定你需要它做什么，而且这些东西总是相对的（屏幕、窗口、文档）。但当我需要弄明白这一点时，我发现这个网站很有用：

我还发现有人为jQuery制作的工具提示插件对x，y定位技巧有各种有趣的见解（看看它的viewport类和jQuery为它提供的底层支持）。

---

您可以使用Prototype或jQuery之类的库，也可以使用：

它返回一个数组

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

我是这样做的：

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

---

值得一提的是，这里有一个递归版本：

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

---

您可以向

元素添加两个属性。prototype

可以获取任何元素的顶部/左侧

window.Object.defineProperty（Element.prototype，'documentOffsetop'{
get:function（）{返回this.offsetTop+（this.offsetParent？this.offsetParent.documentOffsetTop:0）；}
} );
window.Object.defineProperty（Element.prototype，'documentOffsetLeft'{
get:function（）{返回this.offsetLeft+（this.offsetParent？this.offsetParent.documentOffsetLeft:0）；}
} );

---

下面是一个将结果与jQuery的

offset（）进行比较的演示。顶部

和

。左侧

：

大多数位置插件现在都是jQuery核心的一部分。所以你可以只做$（element）.offset（{relativeTo:“body”}）-它会给你对象相对于主体的顶部和左侧。很好，我已经几个月没有下载jQuery了，很高兴知道他们把它放进去了。+1对于jQuery offset你应该把属性给quirksmode.org，该函数看起来非常熟悉。我想我更喜欢您返回对象的想法，而不是Peter Paul Koch在其原始解决方案中选择返回数组。根据parentPos关闭为重复。X应为parentPos[0]，parentPos.Y应为parentPos[1]