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

如果我有如下HTML元素：

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

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

---

…如何使用JavaScript以像素为单位计算它们之间的距离？

获取它们的位置，并使用毕达哥拉斯定理确定它们之间的距离

 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

是元素之间的差异），就可以找到斜边的长度，即元素之间的距离。

只要div现在为空，其基本思想是测量其左上角之间的距离

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

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

无论如何，看看

请注意，即使使用内容（如果不使用css更改），div也将是100%宽度，因此如果您只想测量

br

的高度，请使用：

distance = = y.offsetTop - x.offsetTop;

---

您的标记无效，但是-元素的绝对位置，并使用查找距离。您不想使用jQuery，是吗？不，我不想。我想尽可能坚持标准。：）好的，jQuery

offset（）

也使用

getBoundingClientRect（）

。下面的代码是有意义的。如果“位置”定义为左上角的坐标，则可能存在重复。我认为使用中心点更准确。@Amberlamps当然，如果这是OP想要的（他们没有提到这一要求），那么他们可以调整它（我也会更新答案）。您当前的答案是否给出了两个中心之间的距离？现在您的答案是否给出了中心之间的距离？有什么条件让它工作吗？现在你可以用Math.hypot（）来清理一下。另外，我能得到毕达哥拉斯定理的贴纸，这样我就可以把它放在我的笔记本电脑上了吗？