¿Cómo calculo el ancho entre dos elementos?

Question

Necesito calcular el ancho entre dos elementos, pero no estoy seguro de cómo voy a hacerlo. Digamos que tengo lo siguiente:

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

¿Cómo calculo la distancia entre 1 y 3 (la respuesta es 20px)? El ancho puede ser variable al igual que la cantidad de elementos de la lista? (Estoy usando el marco Prototipo)

Gracias

Answer 1

Si se refiere a la distancia horizontal entre dos elementos, necesita la diferencia entre la parte superior derecha del elemento izquierdo y la parte superior izquierda del elemento derecho. La coordenada superior derecha de un elemento es simplemente la parte superior izquierda coord más su ancho, como figura en la respuesta de Pekka.

Para obtener la posición superior izquierda de un elemento, puede usar el método javascript offsetLeft(). Esto devuelve el desplazamiento en la dimensión x entre un elemento y su elemento primario. Repite el árbol DOM añadiendo offsetLeft sucesivos hasta llegar a la raíz del documento. La suma resultante es tu posición x. El excelente Quirksmode le muestra cómo hacerlo.

Editar: para la exhaustividad, incluyen ejemplo Javascript para encontrar la posición de 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

Si se refiere a la distancia horizontal, yo diría que es algo así como:

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

para obtener el ancho, utilice getWidth()

para obtener el puesto, positionedOffset() podría ser lo correcto, no estoy 100% seguro y depende del posicionamiento de tus elementos.

Y una advertencia general, si sus elementos tienen padding, dependerá del navegador (IE/FF) si el relleno se calcula en el ancho o no. Esto también puede aplicarse al borde. Tendrás que jugar y ver.