js 獲取元素在頁面上的偏移量的最佳方式

使用js制作效果時，我們常常要獲取某個元素在頁面上的偏移量(例如tip提示框功能)。而獲取偏移量可以直接獲取相對於document的偏移量，也可以獲取相對與視口的偏移量(viewpoint)加上頁面滾動量(scroll)獲得。

1.獲取相對與document的偏移量

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

通過向上迭代offsetParent,可以計算出相對於document的偏移量，也就是相對與頁面的偏移量。

此方法的問題:

1)對於使用表格和內嵌框架布局的頁面，由於不同瀏覽器實現元素方式的差異，得到的結果就不精確了。

2)每次都需要一級一級向上查找offsetParent，效率太低。

 

2.獲取相對與視口的偏移量(viewpoint)加上頁面的滾動量(scroll)

function getOffsetRect(ele){
            var box=ele.getBoundingClientRect();
            var body=document.body,
                docElem=document.documentElement;
            //獲取頁面的scrollTop,scrollLeft(兼容性寫法)
            var scrollTop=window.pageYOffset||docElem.scrollTop||body.scrollTop,
                scrollLeft=window.pageXOffset||docElem.scrollLeft||body.scrollLeft;
            var clientTop=docElem.clientTop||body.clientTop,
                clientLeft=docElem.clientLeft||body.clientLeft;
            var top=box.top+scrollTop-clientTop,
                left=box.left+scrollLeft-clientLeft;
            return {
                //Math.round 兼容火狐瀏覽器bug
                top:Math.round(top),
                left:Math.round(left)
            }
        }

此方法直接通過getBoundingClientRect()方法獲得相對於視口的偏移量，加上頁面的滾動量，減去clientTop，clientLeft (IE8及更低版本瀏覽器將(2,2)作為起點坐標，所以要將值減去起點坐標，其他瀏覽器都是已(0,0)作為起點坐標)。

getBoundingClientRect()方法支持IE,ff3+,safari4+,Orear9,5,Chrome.

 

3.兼容性寫法

//獲取元素相對於頁面的偏移
function getOffset(ele){
    if(ele.getBoundingClientRect){
        return getOffsetRect(ele);
    }else{
        return getOffsetSum(ele);
    }
}

對於支持getBoundingClientRect()方法的瀏覽器使用getOffsetRect()方法，不支持的則使用getOffsetSum()方法。

 

參考：

http://javascript.info/tutorial/coordinates#element-coordinates-by-offsetparent