getBoundingClientRect方法獲取元素在頁面中的相對位置

獲取元素位置能夠用 offset 或 getBoundingClientRect，使用 offset 由於兼容性很差，比較麻煩，offset獲取位置會造成「回溯」。而 getBoundingClientRect 方法則
兼容性較好，基本全部的瀏覽器都支持了，且使用起來更容易和簡單。

1.使用語法：

element.getBoundingClientRect();

方法中沒有任何參數，返回值爲對象類型。

 

2.在IE8及如下的瀏覽器中，返回值對象包含的屬性值有：

top:：元素上邊緣距離文檔頂部的距離；

right： 元素右邊緣距離文檔左邊的距離；

bottom：元素下邊緣距離文檔頂部的距離；

left：元素左邊緣距離文檔左邊的距離；

 

3.在IE9以上、谷歌、火狐等瀏覽器中，返回值對象包含的屬性值有：

top： 元素上邊緣距離文檔頂部的距離；

right：元素右邊緣距離文檔左邊的距離；

bottom：元素下邊緣距離文檔頂部的距離；

left：元素左邊緣距離文檔左邊的距離；

width：元素的寬度（包含 padding 和 border）

height：元素的高度（包含 padding 和 border）

 

4.在IE8及如下瀏覽器沒有 width 和 height 屬性的解決方法：

在IE8及如下瀏覽器中，能夠經過計算獲得元素的寬和高：

如：

var dom = document.querySelector("#demo"),
r = dom.getBoundingClientRect();

var width = r.right - r.left;
var height = r.bottom - r.top;