getBoundingClientRect獲取元素位置

getBoundingClientRect用於獲得頁面中某個元素的左，上，右和下分別相對瀏覽器視窗的位置。
getBoundingClientRect是DOM元素到瀏覽器可視範圍的距離（不包含文檔卷起的部分）。
該函式返回一個Object物件，該物件有6個屬性：top,lef,right,bottom,width,height；
這裡的top、left和css中的理解很相似，width、height是元素自身的寬高，但是right，bottom和css中的理解有點不一樣。right是指元素右邊界距視窗最左邊的距離，bottom是指元素下邊界距視窗最上面的距離。

var box=document.getElementById('box');         // 獲取元素

alert(box.getBoundingClientRect().top);         // 元素上邊距離頁面上邊的距離

alert(box.getBoundingClientRect().right);       // 元素右邊距離頁面左邊的距離

alert(box.getBoundingClientRect().bottom);      // 元素下邊距離頁面上邊的距離

alert(box.getBoundingClientRect().left);        // 元素左邊距離頁面左邊的距離
 

注意：IE、Firefox3+、Opera9.5、Chrome、Safari支援，在IE中，預設座標從(2,2)開始計算，導致最終距離比其他瀏覽器多出兩個畫素，我們需要做個相容。

document.documentElement.clientTop;  // 非IE為0，IE為2

document.documentElement.clientLeft; // 非IE為0，IE為2

functiongGetRect (element) {

    var rect = element.getBoundingClientRect();

    var top = document.documentElement
 
.clientTop;

    var left= document.documentElement.clientLeft;

    return{

        top    :   rect.top - top,

        bottom :   rect.bottom - top,

        left   :   rect.left - left,

        right  :   rect.right - left

    }

}