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

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之间的距离(答案是20px)？宽度可以变化,列表项的数量也可以变化？(我正在使用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];
}