js中getBoundingClientRect()方法詳解

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.五、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

    }

}