Jak obliczyć szerokość między dwoma elementami?

Question

Potrzebuję obliczyć szerokość między dwoma elementami, ale nie jestem pewien, jak bym to zrobił. Powiedz, że mam następujące:

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

Jak obliczyć odległość między 1 a 3 (odpowiedź to 20 pikseli)? Szerokość może być zmienna, podobnie jak liczba elementów na liście? (Używam ramy prototyp)

Dzięki

Answer 1

Jeśli chodzi o poziomą odległość między dwoma elementami, potrzebna jest różnica między prawym górnym współrzędnym lewego elementu a lewym górnym prawym elementem prawego elementu. Prawy górny współrzędny elementu to tylko górny lewy współrzędna plus jego szerokość, jak podano w odpowiedzi Pekki.

Aby uzyskać lewą górną pozycję elementu, można użyć metody javascript offsetLeft(). Zwraca to przesunięcie w wymiarze x między elementem a jego elementem nadrzędnym. Powodujesz iterowanie drzewa DOM dodając kolejne wartości przesunięcia, aż dojdziesz do głównego katalogu dokumentów. Wynikowa suma jest twoją pozycją x. Doskonały Quirksmode pokazuje, jak to zrobić.

Edit: pod względem kompletności, ja to przykład javascript, aby znaleźć pozycję danego elementu:

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

Jeśli oznacza odległość poziomą, chciałbym powiedzieć, że jest coś takiego:

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

uzyskać szerokość, użyj getWidth()

aby uzyskać pozycję, positionedOffset() może być właściwą rzeczą, nie jestem w 100% pewny i zależy to od pozycjonowania twoich elementów.

I ogólne zastrzeżenie, jeśli twoje elementy mają padding, będzie zależało od przeglądarki (IE/FF), czy wypełnienie jest obliczane na szerokość czy nie. Może to również dotyczyć granicy. Będziesz musiał się bawić i zobaczyć.