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

Question

我需要计算两个元素之间的宽度，但我不确定该怎么做。假设我有以下内容:

<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 之间的距离(答案是 20 像素)？宽度可以像列表项的数量一样可变？ (我使用的是 Prototype 框架)

谢谢

Answer 1

如果你指的是两个元素之间的水平距离，你需要左边元素的右上角坐标和右边元素的左上角坐标之间的差值。元素的右上角坐标就是左上角坐标加上它的宽度，如 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];
}