测量元素和窗口边距之间的长度

Question

我正在尝试测量 html元素与当前视口边框之间的像素。

例如，如果我们有 DIV -

|--------------------------|
|                          |
|                          | 
|       |=========|        |
|   L   |   DIV   |    R   |
|<----->|         |<------>|
|       |=========|        |
|                          |
|--------------------------|

我知道如何测量当前视口，

var $w = $(window);
return {
    l: $w.scrollLeft(),
    t: $w.scrollTop(),
    w: $w.width(),
    h: $w.height() 
}

有没有办法以像素为单位获得 R 和 L 值？它不应该是元素和屏幕边框，它应该是元素和视口边界。

Answer 1

试试这个，但它会相对于它的父节点给出偏移量，所以如果它的父节点是body你会获得所需的结果，如果没有那么Incase然后得到它的父节点的偏移量并添加它

function getOffset(id)
{

    var ele = document.getElementById(id);
    var left = parseInt(ele.style.left || ele.offsetLeft);
    var right = parseInt(ele.style.right || ele.offsetRight);

    alert(left + " " +right);
}