Messen Sie den Abstand zwischen zwei HTML-Elemente Zentren

Question

Wenn ich HTML-Elemente haben, wie folgt:

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

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

... wie finde ich den Abstand zwischen ihnen in Pixeln mit JavaScript?

Answer 1

ihre Positionen holen, und den Satz des Pythagoras verwenden, um die Distanz zwischen ihnen ...

(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 zu bestimmen.

Der Satz des Pythagoras bezieht sich auf die Beziehung zwischen den Seiten eines rechtwinkligen Dreiecks.

Die Elemente werden auf einem Cartesian coordinate system (mit Ursprung in oben links) aufgetragen, so dass man ein rechtwinkliges Dreieck zwischen den Koordinaten Elemente vorstellen kann (die unbekannte Seite ist die Hypotenuse).

Sie können die Gleichung ändern, um den Wert c zu erhalten, indem Sie die Quadratwurzel der anderen Seite erhalten.

Dann stecken Sie einfach die Werte in (der x und y sind die Unterschiede zwischen den Elementen, sobald ihre Zentren bestimmt) und Sie erhalten die Länge der Hypotenuse, zu finden ist der Abstand zwischen den ist Elemente.

Answer 2

bis divs jetzt leer sind, ist die Grundidee, den Abstand zwischen den linken oberen Ecken

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

aber Sie müssen subtrahieren erste div ‚s Höhe und Breite zu messen, wenn Sie etwas nach innen setzen . Diese Methode hat einige Probleme mit der Unterstützung und Rahmenbreite von Elementen in verschiedenen Browsern.

nehmen trotzdem einen Blick auf Fiddle

Hinweis, dass auch mit Inhalt (wenn Sie es nicht mit CSS ändern) divs Breite von 100% sein wird, wenn Sie also nur br ‚s messen wollen Höhe:

distance = = y.offsetTop - x.offsetTop;