测量两个HTML元素中心之间的距离

Question

如果我有以下HTML元素：

<div id="x"></div>

<div id="y" style="margin-left:100px;"></div>

如何使用JavaScript找到它们之间的像素距离？

- tenstar

---

你的标记无效，但是仍然可以计算元素的绝对位置，并使用该公式来找出距离。 - georg

你不想使用jQuery，是吗？ - Allan Stepps

不，我不想这样做。我想尽可能坚持标准。 :) - tenstar

嗯，jQuery的offset()也使用了getBoundingClientRect()。下面的代码是有意义的。 - Allan Stepps

可能是重复的问题：如何获取2个元素（中间点）之间的距离？ - Jessica

Answer 1

获取它们的位置，并使用勾股定理来确定它们之间的距离...

 function getPositionAtCenter(element) {
   const {top, left, width, height} = element.getBoundingClientRect();
   return {
     x: left + width / 2,
     y: top + height / 2
   };
 }

function getDistanceBetweenElements(a, b) {
  const aPosition = getPositionAtCenter(a);
  const bPosition = getPositionAtCenter(b);

  return Math.hypot(aPosition.x - bPosition.x, aPosition.y - bPosition.y);  
}

const distance = getDistanceBetweenElements(
  document.getElementById("x"),
  document.getElementById("y")
);

如果您的浏览器不支持 Math.hypot()，您可以使用以下内容代替：

Math.sqrt(
  Math.pow(aPosition.x - bPosition.x, 2) + 
  Math.pow(aPosition.y - bPosition.y, 2) 
);

勾股定理涉及直角三角形的边之间的关系。

这些元素被绘制在笛卡尔坐标系上（原点在左上角），所以你可以想象元素坐标之间形成了一个直角三角形（未知边为斜边）。

你可以修改方程式，通过对另一边进行平方根运算来获取c的值。

然后，你只需将数值插入其中（x 和 y 是元素中心确定后的差值），就可以找到斜边的长度，即两个元素之间的距离。

- alex

---

如果“position”被定义为左上角的坐标，则这是正确的。我认为使用中心点更准确。 - Amberlamps

@Amberlamps 当然，如果这是 OP 想要的（他们没有提到这个要求），那么他们可以进行调整（我也会更新答案）。 - alex

你当前的答案是否给出了两个中心之间的距离？ - tenstar

现在你的答案是否给出了中心之间的距离？还有什么条件需要满足才能使其工作吗？ - tenstar

现在可以使用 Math.hypot() 来简化代码。另外，我可以得到一个毕达哥拉斯定理的贴纸吗？这样我就可以把它贴在我的笔记本电脑上了。 - tylertrotter

Answer 2

就目前而言，由于div现在是空的，基本思路是测量它们左上角之间的距离。

distX = y.offsetLeft - x.offsetLeft;
distY = y.offsetTop - x.offsetTop;
distance = Math.sqrt(distX*distX + distY*distY);
alert(Math.floor(distance));

但是如果您在

中放置了内容，您必须先减去其高度和宽度。这种方法在不同浏览器中对元素的支持和边框宽度存在一些问题。

无论如何，请查看Fiddle

请注意，即使有内容（如果您不使用CSS更改它），

也将具有100％的宽度，因此如果您只想测量br的高度，请使用：

distance = = y.offsetTop - x.offsetTop;

- vladkras