Come si calcola la larghezza tra due elementi?

Question

Ho bisogno di calcolare la larghezza tra due elementi, ma non sono sicuro di come andrei su questo. Dire che ho il seguente:

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

Come calcolare la distanza tra 1 e 3 (risposta 20px)? La larghezza può essere variabile così come il numero di voci dell'elenco? (Sto usando il framework Prototype)

Grazie

Answer 1

Se si intende la distanza orizzontale tra due elementi, è necessaria la differenza tra il coord superiore destro dell'elemento sinistro e il coord superiore sinistro dell'elemento destro. La coordinazione in alto a destra di un elemento è solo la corda in alto a sinistra più la sua larghezza, come indicato nella risposta di Pekka.

Per ottenere la posizione in alto a sinistra di un elemento, è possibile utilizzare il metodo javascript offsetLeft(). Ciò restituisce l'offset nella dimensione x tra un elemento e il suo genitore. Si esegue l'iterazione dell'albero DOM aggiungendo successive offsetLeft fino ad arrivare alla radice del documento. La somma risultante è la tua posizione x. L'eccellente Quirksmode mostra come farlo.

Edit: per completezza, che comprendono ad esempio javascript per trovare la posizione di un elemento:

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

Se vuoi dire la distanza orizzontale, vorrei dire che è qualcosa di simile:

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

per ottenere la larghezza, utilizzare getWidth()

per ottenere la posizione, positionedOffset() potrebbe essere la cosa giusta, non sono sicuro al 100% e dipende dal posizionamento dei tuoi elementi.

E un avvertimento generale, se i vostri elementi hanno padding, dipenderà dal browser (IE/FF) se il riempimento è calcolato in larghezza o meno. Questo può valere anche per il confine. Dovrai giocare e vedere.