21

如果我有如下 HTML 元素:

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

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

...如何使用 JavaScript 以像素为单位找到它们之间的距离?

4

2 回答 2

39

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

 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您可以通过获取另一边的平方根来修改等式以获取 的值。

距离方程

然后,您只需将值插入(xy是确定元素中心后的元素之间的差异),您将找到斜边的长度,即元素之间的距离。

于 2013-07-13T08:42:57.760 回答
0

至于 div 现在是空的,基本思想是测量它们的左上角之间的距离

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

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

无论如何看看小提琴

请注意,即使有内容(如果您不使用 css 更改它)div 也将是 100% 宽度,因此如果您只想测量br的高度,请使用:

distance = = y.offsetTop - x.offsetTop;
于 2013-07-13T09:19:13.890 回答