使用 JavaScript 查找 HTML 元素的 X/Y [重复]答案

【问题标题】：Find X/Y of an HTML element with JavaScript [duplicate]使用 JavaScript 查找 HTML 元素的 X/Y [重复]
【发布时间】：2010-09-14 16:19:02
【问题描述】：

如果没有明确设置，我如何从 JavaScript 中找到 HTML 元素 (DIV) 的 XY 坐标？

【问题讨论】：

按照meta.stackexchange.com/questions/147643/…关闭为重复项

标签： javascript html

【解决方案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
    };
};

【讨论】：

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

【解决方案2】：

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

【讨论】：

大部分职位插件现在是 jQuery 核心的一部分。所以你可以做 $(element).offset({relativeTo: "body"}) - 它会给你相对于身体的对象的顶部和左侧。
太好了，我已经有几个月没有下载 jQuery 了，很高兴知道他们推出了它。

【解决方案3】：

可以使用Prototype或jQuery等库，也可以使用this handy function：

它返回一个数组。

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

【讨论】：

你应该把归属地给quirksmode.org，那个功能看起来很眼熟。

【解决方案4】：

对于它的价值，这是一个递归版本：

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

【讨论】：

parentPos.X 应该是 parentPos[0]，parentPos.Y 应该是 parentPos[1]

【解决方案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/

【讨论】：

【解决方案6】：

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

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

【讨论】：