JavaScript - 取得元素在頁面中的位置

在過去，類似下面的程式碼很常被用在取得元素位置

function findPos(obj) {
    var left, top;
    left = top = 0;
    if (obj.offsetParent) {
        do {
            left += obj.offsetLeft;
            top += obj.offsetTop;
        } while (obj = obj.offsetParent);
    }
    return {
        x : left,
        y : top,
    };
};

objPos = findPos(document.getElementById('test'));
alert("x:" + objPos.x + " | y:" + objPos.y);

offsetParent會回傳距離傳入物件最近的容器
這個屬性會依傳入物件及其父元素是否有設定 postion屬性(absolute、relative)變動
一般沒有指定定位的情形下，最外層的offsetParent就是document.body

這個方法的成本偏大，特別是若需進行較多次迴圈運算時
使用時將結果儲存為 local 變數會是比較好的處理作法

既然說了在過去，表示這個做法一定有那裡不夠好
除了上述提過會使用較多的資源來進行計算外
offsetParent也有可能有相容性的疑慮，而卷軸捲動的scrollTop、scrollLeft也會被計算進來

通常我們需要的只是單純的計算元素距離瀏覽器視窗的相對位置
現在該用的作法是 element.getBoundingClientRect();
這個方法會回傳一個物件，物件成員有元素的 left、top、right、bottom、width、height數值
因為這個方法過去是IE獨有，而現在 firefox 和 chrome 也都有支援，所以也不必擔心相容性