找到元素的偏移客户端位置

Question

如何使用Javascript找到元素的偏移客户端位置？ （我假设相同的代码可以写在BHO或Gecko/NPAPI中）。

我面临的问题是一种找出元素的偏移客户端位置的方法。 e.srcElement.offsetX/Y并不总是给出正确的值（clientX/Y也是如此）。在某些情况下，我们还需要考虑父元素滚动。

我们如何做到这一点？有没有简单的方法呢？

Answer 1

function getElementTop (Elem) 
{ 
    var elem; 

    if (document.getElementById) 
    { 
     elem = document.getElementById (Elem); 
    } 
    else if (document.all) 
    { 
     elem = document.all[Elem]; 
    }   

    yPos = elem.offsetTop; 
    tempEl = elem.offsetParent; 

    while (tempEl != null) 
    { 
     yPos += tempEl.offsetTop; 
     tempEl = tempEl.offsetParent; 
    } 

    return yPos; 
} 


function getElementLeft (Elem) 
{ 
    var elem; 

    if (document.getElementById) 
    { 
     var elem = document.getElementById (Elem); 
    } 
    else if (document.all) 
    { 
     var elem = document.all[Elem]; 
    }   

    xPos = elem.offsetLeft; 
    tempEl = elem.offsetParent;   

    while (tempEl != null) 
    { 
     xPos += tempEl.offsetLeft; 
     tempEl = tempEl.offsetParent; 
    }   
    return xPos; 
} 

将元素ID传递给函数。

Answer 2

要包含滚动，请查看此jQuery事件侦听器以记录scrollTop和偏移量。

// Don't put this in the scroll event listener callback, or that will be unnecessarily performance intensive. 
var offset = $("#id").offset().top; 

$(window).bind("scroll", function() { 

console.log(
    $(window).scrollTop() + 
    offset 
); 

}); 

，以获得单独的偏移，

("#id").offset().top; 

Answer 3

请参见下面的代码：

function getOffsetSum(elem) { 
    var top=0, left=0; 
    while(elem) { 
     top = top + parseInt(elem.offsetTop); 
     left = left + parseInt(elem.offsetLeft); 
     elem = elem.offsetParent; 
    } 
    return {top: top, left: left}; 
} 

Answer 4

的CoffeeScript版本的Orhun Alp Oral's answer：

getOffset = (elem)-> 
    top = 0 
    left = 0 
    while elem 
     top += parseInt(elem.offsetTop) 
     left += parseInt(elem.offsetLeft) 
     elem = elem.offsetParent 
    {top, left}