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];
}

Answer 2

如果你的意思是水平距离，我会说它是这样的：

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

获取宽度，请使用getWidth()

获得职位，positionedOffset()可能是正确的，我不是百分百肯定，这取决于你的元素的定位。

一般警告，如果你的元素有padding，它将取决于浏览器（IE / FF）填充是否计算到宽度。这也可能适用于边境。你将不得不四处游玩并看到。

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

2 个答案: