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

Question

如果HTML元素（DIV）的坐标没有被明确设置，我该如何从JavaScript中找到它们的XY坐标？

- Dan Nordell

---

根据http://meta.stackexchange.com/questions/147643/should-i-vote-to-close-a-duplicate-question-even-though-its-much-newer-and-ha的建议，本问题已被标记为重复。 - user123444555621

Answer 1

这是我的做法：

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

---

我认为我更喜欢你返回对象的想法，而不是Peter-Paul Koch在他的原始解决方案中返回数组的选择。 - cssimsek

Answer 2

这可能会因浏览器和版本而有所不同。我建议使用jQuery和positions插件。

- palehorse

---

大多数位置插件现在已经成为jQuery核心的一部分。因此，您只需执行$(element).offset({relativeTo: "body"}) - 它将向您提供对象相对于body的顶部和左侧位置。 - Sugendran

太好了，我已经好几个月没下载jQuery了，知道他们将其卷入其中真是太棒了。 - palehorse

Answer 3

你可以使用类似Prototype或jQuery的库，或者你可以使用这个方便的函数：findpos。它返回一个数组。

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

- Diodeus

---

你应该归功于quirksmode.org，那个函数看起来非常熟悉。 - pilsetnieks

Answer 4

以下是一种递归版本的实现：

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

- jjthrash

---

parentPos.X 应该改为 parentPos[0]， parentPos.Y 应该改为 parentPos[1]。 - Noah

Answer 5

您可以向Element.prototype添加两个属性，以获取任何元素的顶部/左侧位置。

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

这里有一个演示，展示了与jQuery的offset().top和.left的结果比较: http://jsfiddle.net/ThinkingStiff/3G7EZ/

- ThinkingStiff

Answer 6

我不确定你需要它做什么，这些东西总是相对的（屏幕、窗口、文档）。但当我需要弄清楚时，我发现这个网站很有帮助： http://www.mattkruse.com/javascript/anchorposition/source.html

我还发现，为jQuery制作的工具提示插件具有各种有趣的x、y定位技巧（查看其视口类和底层支持jQuery提供的内容）。 http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/

- wulimaster