测量两个HTML元素之间的距离＆＃39;中心

Question

如果我有以下HTML元素：

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

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

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

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

毕达哥拉斯定理涉及直角三角形边之间的关系。

元素绘制在Cartesian coordinate system上（原点位于左上角），因此您可以想象元素坐标之间的直角三角形（未知边是斜边）。

您可以通过获取另一方的平方根来修改公式以获取c的值。

然后，你只需插入值（x和y是元素之间的差异，一旦确定了它们的中心），你会发现斜边的长度，即距离元素之间。

Answer 2

至于div现在是空的，基本的想法是测量左上角之间的距离

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

但如果你把东西放进去，你必须减去第一个div的高度和宽度。此方法在不同浏览器中的元素支持和边框宽度方面存在一些问题。

无论如何看看 Fiddle

注意，即使有内容（如果你不用css改变它）div也是100％宽度，所以如果你只想测量br的高度使用：

distance = = y.offsetTop - x.offsetTop;