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

Posted 2023-02-21

【中文标题】使用 JavaScript 查找 HTML 元素的 X/Y [重复]

【英文标题】：Find X/Y of an HTML element with JavaScript [duplicate]

【发布时间】：2010-09-14 16:19:02

【问题描述】：

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

【问题讨论】：

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

【参考方案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/