Misura tra i centri degli elementi HTML due

Question

Se ho elementi HTML come segue:

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

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

... come faccio a trovare la distanza tra loro in pixel utilizzando Javascript?

Answer 1

ottenere le loro posizioni, e utilizzare il teorema di Pitagora per determinare la distanza tra di loro ...

(function() { 

    var getPositionAtCenter = function (element) { 
     var data = element.getBoundingClientRect(); 
     return { 
      x: data.left + data.width/2, 
      y: data.top + data.height/2 
     }; 
    }; 

    var getDistanceBetweenElements = function(a, b) { 
     var aPosition = getPositionAtCenter(a); 
     var bPosition = getPositionAtCenter(b); 

     return Math.sqrt(
      Math.pow(aPosition.x - bPosition.x, 2) + 
      Math.pow(aPosition.y - bPosition.y, 2) 
     ); 
    }; 

    var distance = getDistanceBetweenElements(document.getElementById("x"), 
               document.getElementById("y")); 

})(); 

jsFiddle.

Il Teorema di Pitagora si riferisce alla relazione tra i lati di un triangolo rettangolo.

Gli elementi sono tracciati su un Cartesian coordinate system (con origine nel alto a sinistra), in modo da poter immaginare un triangolo rettangolo tra le coordinate degli elementi (il lato sconosciuto è l'ipotenusa).

È possibile modificare l'equazione per ottenere il valore di c ottenendo la radice quadrata dell'altro lato.

Poi, è sufficiente collegare i valori (la x e y sono le differenze tra gli elementi di una volta i loro centri sono determinati) e troverete la lunghezza dell'ipotenusa, che è la distanza tra la elementi.

Answer 2

quanto div sono ora vuote, l'idea di base è quella di misurare la distanza tra loro angoli superiori sinistro

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

ma si deve sottrarre prima altezza div s' e la larghezza, se si mette qualcosa dentro . Questo metodo presenta alcuni problemi con il supporto e la larghezza del bordo degli elementi nei diversi browser.

comunque dare un'occhiata a Fiddle

nota, che anche con i contenuti (se non si cambia con i CSS) div saranno 100 width%, quindi se si vuole semplicemente misurare br 's uso altezza:

distance = = y.offsetTop - x.offsetTop;