Javascript 如何计算两个元素之间的宽度？

我需要计算两个元素之间的宽度，但我不确定如何计算。假设我有以下几点：

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

宽度：10px；“>
宽度：20px；“>
宽度：30px；“>

我如何计算1和3之间的距离（答案是20px）？宽度可以是可变的，列表项的数量也可以是可变的？（我正在使用原型框架）

---

谢谢

如果你指的是水平距离，我会说它类似于：

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

要获得宽度，请使用

要得到这个位置，可能是正确的，我不是100%确定，这取决于你的元素的位置

---

还有一个一般性的警告，如果您的元素有

填充

，它将取决于浏览器（IE/FF）是否将填充计算到宽度中。这也可能适用于边界。你必须四处游走看看。

如果你指的是两个元素之间的水平距离，你需要左元素的右上角坐标和右元素的左上角坐标之间的差值。元素的右上角坐标就是左上角坐标加上它的宽度，如Pekka的答案所示

要获取元素的左上角位置，可以使用javascript方法offsetLeft（）。这将返回x维度中元素与其父元素之间的偏移量。向上迭代DOM树，添加连续的offsetLeft，直到到达文档根。结果的总和就是你的x位置。优秀的课程向你展示了如何做到这一点

编辑：为了完整性，我使用示例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];
}

---

谢谢你们，你们让我离解决这个问题更近了（我的真实世界的例子要复杂得多，但你们让我走上了正确的轨道！）