dwa elementy HTML

Question

Jeśli mam elementów HTML w następujący sposób:

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

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

... jak znajdę odległość między nimi w pikselach przy użyciu JavaScript?

Answer 1

Get swoje stanowiska, i korzystać z twierdzenia Pitagorasa do określenia odległości między nimi ...

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

Twierdzenie Pitagorasa dotyczy relacji między bokami trójkąta prostokątnego.

Elementy są wykreślane na Cartesian coordinate system (z pochodzenia w lewym górnym rogu), więc można sobie wyobrazić trójkąt prostokątny współrzędnych pomiędzy elementami (nieznane strona jest przeciwprostokątna).

Możesz zmodyfikować równanie, aby uzyskać wartość c, pobierając pierwiastek kwadratowy z drugiej strony.

Następnie wystarczy podłączyć wartości w (x i y są różnice pomiędzy elementami raz ich centra są ustalone), a znajdziesz długość przeciwprostokątnej, czyli odległość między elementy.

Answer 2

miarę div są teraz puste, podstawową ideą jest, aby zmierzyć odległość między ich lewych górnych rogach

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

ale trzeba odjąć pierwszy div jest wysokość i szerokość, jeśli umieścić coś w środku . Ta metoda ma pewne problemy z obsługą i szerokością krawędzi elementów w różnych przeglądarkach.

zresztą przyjrzeć Fiddle

nocie, że nawet z zawartością (jeśli nie zmienić go z CSS) DIV będzie 100% szerokości, więc jeśli chcesz tylko do pomiaru br „s zastosowanie wysokość:

distance = = y.offsetTop - x.offsetTop;