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

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

勾股定理与直 Angular 三 Angular 形各边之间的关系有关。

元素绘制在 Cartesian coordinate system 上(原点在左上角)，所以你可以想象元素坐标之间的直 Angular 三 Angular 形(未知边是斜边)。

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

然后，您只需将值插入(x 和 y 是确定元素中心后元素之间的差异)，您将找到斜边，即元素之间的距离。