Comment calculer la largeur entre deux éléments?

Question

J'ai besoin de calculer la largeur entre deux éléments mais je ne suis pas sûr de la façon dont j'irais à ce sujet. Disons que j'ai ce qui suit:

<ul id="foo"> 
    <li style="width:10px;"><a href="#">1</a></li> 
    <li style="width:20px;"><a href="#">2</a></li> 
    <li style="width:30px;"><a href="#">3</a></li> 
</ul> 

Comment calculer la distance entre 1 et 3 (réponse étant 20px)? La largeur peut être variable tout comme le nombre d'éléments de la liste? (J'utilise le cadre du prototype)

Merci

Answer 1

Si vous voulez dire la distance horizontale entre deux éléments, vous avez besoin de la différence entre la coord droite supérieure de l'élément gauche et la coord gauche supérieure de l'élément droit. La coord droite supérieure d'un élément est juste la coord gauche supérieure plus sa largeur, comme indiqué dans la réponse de Pekka.

Pour obtenir un élément en haut à gauche, vous pouvez utiliser la méthode javascript offsetLeft(). Cela renvoie le décalage dans la dimension x entre un élément et son parent. Vous parcourez l'arborescence DOM en ajoutant successLe offsetLeft jusqu'à ce que vous arriviez à la racine du document. La somme qui en résulte est votre position x. L'excellent Quirksmode vous montre comment faire cela.

Edit: pour être complet, j'incluent par exemple le javascript pour trouver une position de l'élément:

function getNodePosition(node) {  
    var top = left = 0; 
    while (node) {  
     if (node.tagName) { 
      top = top + node.offsetTop; 
      left = left + node.offsetLeft;  
      node = node.offsetParent; 
     } else { 
      node = node.parentNode; 
     } 
    } 
    return [top, left]; 
} 

Answer 2

Si vous voulez dire la distance horizontale, je dirais que c'est quelque chose comme:

X position of element 2 
minus 
x position of element 1 plus width of element 1 

pour obtenir la largeur, utilisez getWidth()

pour obtenir la position, positionedOffset() pourrait être la bonne chose, je ne suis pas sûr à 100% et cela dépend du positionnement de vos éléments.

Et une mise en garde générale, si vos éléments ont padding, il dépendra du navigateur (IE/FF) si le remplissage est calculé dans la largeur ou non. Cela peut également s'appliquer à la frontière. Vous devrez jouer et voir.