Mesurer la distance entre deux centres d'éléments HTML

Question

Si j'ai des éléments HTML comme suit:

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

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

... Comment puis-je trouver la distance entre eux en pixels en utilisant JavaScript?

Answer 1

obtenir leurs positions, et utiliser le théorème de Pythagore pour déterminer la distance entre eux ...

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

Le théorème de Pythagore se rapporte à la relation entre les côtés d'un triangle rectangle.

Les éléments sont représentés sur un Cartesian coordinate system (avec origine en haut à gauche), de sorte que vous pouvez imaginer un triangle rectangle entre les coordonnées des éléments (le côté inconnu est l'hypoténuse).

Vous pouvez modifier l'équation pour obtenir la valeur c en obtenant la racine carrée de l'autre côté.

Ensuite, vous branchez simplement les valeurs (le x et y sont les différences entre les éléments une fois sont déterminés leurs centres) et vous trouverez la longueur de l'hypoténuse, qui est la distance entre la éléments.

Answer 2

dans la mesure DIV sont maintenant vides, l'idée de base est de mesurer la distance entre les coins en haut à gauche

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

mais vous devez soustrayez première hauteur de div et la largeur, si vous mettez quelque chose à l'intérieur . Cette méthode a quelques problèmes avec le support et la largeur de la bordure des éléments dans différents navigateurs.

prendre de toute façon un oeil à Fiddle

Notez que même avec le contenu (si vous ne changez pas avec css) divs seront 100% largeur, donc si vous voulez juste mesurer br « s utilisation de la hauteur:

distance = = y.offsetTop - x.offsetTop;