web-dev-qa-db-ja.com

2つのHTML要素の中心間の距離を測定する

次のようなHTML要素がある場合：

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

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

... JavaScriptを使用してピクセル単位でそれらの間の距離を見つけるにはどうすればよいですか？

javascripthtmldistance
17
tenstar

それらの位置を取得し、ピタゴラス定理を使用してそれらの間の距離を決定します...

_ 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は、中心が決定された後の要素間の差です）、斜辺の長さ、つまり間の距離がわかります。要素。

32
alex

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
vladkras