Wie berechne ich die Breite zwischen zwei Elementen?

Question

Ich muss die Breite zwischen zwei Elementen berechnen, aber ich bin mir nicht sicher, wie ich das machen würde. Angenommen, ich habe Folgendes:

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

Wie würde ich den Abstand zwischen 1 und 3 berechnen (Antwort ist 20px)? Die Breite kann variabel sein, ebenso wie die Anzahl der Listenelemente? (Ich verwende den Prototype-Framework)

Dank

Answer 1

Wenn Sie den horizontalen Abstand zwischen zwei Elementen meinen, benötigen Sie den Unterschied zwischen der oberen rechten Koordinate des linken Elements und der oberen linken Koordinate des rechten Elements. Die obere rechte Koordinate eines Elements ist nur die obere linke Koordinate plus ihre Breite, wie in Pekkas Antwort angegeben.

Um die obere linke Position eines Elements zu erhalten, können Sie die Javascript-Methode offsetLeft() verwenden. Dies gibt den Offset in der x-Dimension zwischen einem Element und seinem Elternelement zurück. Sie iterieren die DOM-Struktur und fügen sukzessive offsetLeft's hinzu, bis Sie zum Document-Root gelangen. Die resultierende Summe ist Ihre x-Position. Die ausgezeichnete Quirksmode zeigt Ihnen, wie Sie dies tun.

Edit: Für Vollständigkeit, ich umfassen Beispiel javascript die Position eines Elements zu finden:

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

Wenn Sie den horizontalen Abstand bedeuten, würde ich sagen, es ist so etwas wie:

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

die Breite zu erhalten, verwenden getWidth()

um die Position zu bekommen, positionedOffset() könnte das Richtige sein, ich bin nicht 100% sicher und es hängt von der Positionierung Ihrer Elemente ab.

Und ein allgemeiner Vorbehalt, wenn Ihre Elemente padding haben, hängt es vom Browser ab (IE/FF), ob das Padding in der Breite berechnet wird oder nicht. Dies kann auch für die Grenze gelten. Sie müssen herumspielen und sehen.