2つの要素の間の幅を計算するにはどうすればよいですか？

Question

2つの要素の間の幅を計算する必要がありますが、これについてどうすればよいか分かりません。

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

私は1と3の間の距離をどのように計算するのですか（回答20px）？幅はリスト項目の数と同じように可変にすることができますか？ getWidth()

を使用し、幅を取得するために

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

：あなたは水平距離を意味している場合、私はそれはのようなものだと言うだろう

おかげ

Answer 1

2つの要素の水平距離を意味する場合は、左要素の右上座標と右要素の左上座標の差が必要です。要素の右上の座標は、Pekkaの答えで与えられるように、左上の座標と幅だけです。

要素の左上の位置を取得するには、javascriptのメソッドoffsetLeft（）を使用できます。これは、要素とその親の間のx次元のオフセットを返します。 DOMツリーを反復して、ドキュメントルートに到達するまで、連続したoffsetLeftを追加します。結果の合計はあなたのx位置です。優れたQuirksmodeはこれを行う方法を示しています。

編集：完全を期すために、私は、要素の位置を見つけるために、JavaScriptの例を含める：

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

を（私はプロトタイプフレームワークを使用しています） positionedOffset()が正しいことになるかもしれない、私は100％確信していないし、あなたの要素の位置に依存します。

あなたの要素がpaddingの場合、一般的な注意点として、埋め込みが幅に計算されるかどうかはブラウザ（IE/FF）によって異なります。これは国境にも適用されます。あなたは遊んで見なければなりません。