你還在用document.getElementById('ele').offsetHeight獲取元素的寬高嗎？
no no no！
今天介紹一個方法：getBoundingClientRect() 快速獲取元素的寬高。
一、什麼是Element.getBoundingClientRect()方法？有什麼作用？
作用：用來獲取元素的位置以及大小相關的資訊。
是DOM元素的一個方法，返回一個DOMRect物件，包含元素的大小及其相對於視口的位置。
二、語法
element.getBoundingClientRect（）
三、返回值
該物件有6個屬性：top,lef,right,bottom,width,height；
{
bottom：430, //元素底部距離視窗頂部的距離 (等於 y + height)
height:340, //元素的高度
left:120, //元素左側距離視窗左側的距離
right:460, //元素右側距離視窗右側的距離(等於 x + width)
top:90, //元素頂部距離視窗的距離
width:340, //元素的寬度
x:120, //元素左上角相對於視口的橫座標
y:90 //元素左上角相對於視口的縱座標
}
四、示例及分析
下面是一個小案例，由下圖可知當前元素為#box，及box的相關樣式(圖中紅色框）,針對返回值進行詳細分析與計算。結果如下圖：
width / height：width和height屬性包含了padding和border ，而不僅僅是內容部分的寬度和高度。
在標準盒子模型中，這兩個屬性值分別與元素的 width/height + padding + border-width 相等。如果是box-sizing:border-box ，兩個屬性則直接與元素的 width 或 height 相等。
top：圖中紅色線表示top的取值區域，最外層邊框到視窗頂部的距離。
計算：當前元素的margin-top為90，說明距離視窗頂部為90px，所以top=90
left：圖中藍色線表示left的取值範圍，可知是由最外層邊框到視窗左側的距離。
計算：當前元素的margin-left為120，說明距離視窗左側為120px，所left=90
bottom：圖中紫色線表示bottom的取值範圍，可知是元素最底部到視窗頂部的距離。
(包含元素的border、margin和元素總高度(padding+cotent height)）。
計算：此時的bottom=border+(content height+padding)+margin-top，所left=(102)+[300+(102)]+90=430，即等於 y + height
right：圖中綠色線表示right的取值範圍，可知是元素最底部到視窗頂部的距離。
(包含元素的border、margin和元素總高度(padding+cotent width)）。
計算：此時的right=border+(content width +padding)+margin-right，所left=(102)+[300+(102)]+120=460，即等於x + width
x：元素左上角相對於視口的橫座標，即與left相同，所以x=120。
y：元素左上角相對於視口的縱座標，即與top相同，所以y=90。
