如何計算兩個元素之間的寬度？

我需要計算兩個元素之間的寬度，但我不知道如何去做這件事。說我有以下幾點：如何計算兩個元素之間的寬度？

<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）？寬度可以像列表項數一樣變化嗎？（我使用的原型框架）

感謝

來源

2009-12-13 Rich

如果您指的是兩個元素之間的水平距離，則需要左元素的右上角座標和右元素的左上角座標之間的差值。一個元素的右上角座標只是左上角的座標加上其寬度，如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]; 
}

來源

2009-12-13 13:17:13

謝謝你們，你讓我更接近解決這個（我的現實世界的例子是一個複雜得多，但你讓我走上正軌！） – Rich 2009-12-13 15:18:05

如果你指的是水平距離，我會說這是這樣的：

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

得到寬度，使用getWidth()

爲了獲得這個位置，positionedOffset()可能是正確的，我不是100％確定的，這取決於你的元素的定位。

還有一個通常的警告，如果你的元素有padding，它將取決於瀏覽器（IE/FF）是否將填充計算爲寬度。這也可能適用於邊界。你將不得不四處看看。

來源

2009-12-13 12:09:07

如何計算兩個元素之間的寬度？

回答

相關問題