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

问题描述 投票:0回答:3

如果我有如下 HTML 元素:

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

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

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

javascript html distance
3个回答
45
投票

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

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

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

Pythagorean Theorem

元素绘制在笛卡尔坐标系上(原点位于左上角),因此您可以想象元素坐标之间有一个直角三角形(未知边是斜边)。

您可以修改方程,通过求另一边的平方根来得到

c
的值。

Distance equation

然后,您只需将这些值代入(确定中心后,

x
y
是元素之间的差异),您就会找到斜边的长度,即元素之间的距离。


0
投票

目前 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;

0
投票

很简单。公式为

sqrt(x^2 + y^2)

这是 javascript 代码。

let FeCo = document.getElementById('FiID').getBoundingClientRect();
let SeCo = document.getElementById('SeID').getBoundingClientRect();

// Here is the distance
Math.sqrt(
   (FiCo.left+FiCo.width/2)^2 +
   (SeCo.top+SeCo.height/2)^2
)
© www.soinside.com 2019 - 2024. All rights reserved.