getBoundingClientRect 方法 有6個屬性 top 、bottom、right、left、width和height
ie9以下瀏覽器只支持 getBoundingClientRect 方法的 top 、bottom、right、left屬性；
ie9 和其它瀏覽器支持 getBoundingClientRect 方法 有6個屬性 top 、bottom、right、left、width和height；
問題
想要確定一個Web頁面元素的當前高度；
解決方案
針對該元素調用getBoundingClientRect。如果返回的TextRectangle/ClientRect 對象有一個height屬性，使用它。否則，從其頂部減去矩形的底部值，從而得到高度：
var height = 0;
var rect = document.getElementById("it").getBoundingClientRect();
if(rect.height){
height = rect.height;
}else{
height = rect.bottom - rect.top;
}
console.log(height)
討論
getBoundingClientRect 方法是基於Microsoft針對IE 5的實現，現在，它已經在W3C CSSOM View模塊中標准化了。 W3C CSSOM View 模塊規范提供了一種標准的方式，用來獲取關於Web 頁面視口的信息，以及該元素在視口中的空間安排。
element.getBoundingClientRect 方法返回一個ClientRect對象（在實現中是TextRectangle），它包含了關於元素的邊界矩形的信息。大多數實現支持對象的4個屬性：top、bottom、right和left。Firefox也包括width和height，盡管這二者都可以從其他值得出來。
當我提到元素的邊界矩形的時候，返回的大小包含了任何padding和border值。如果一個元素有如下的樣式表設置：
#elem{ height:400px}
並且你訪問了邊界矩形的高度，它是400像素。如果元素有如下的樣式表
#elem{
height:400px;
padding: 10px;
border:5px solid red;
margin:20px;
}
邊界矩形的高度將會是430像素：高度400，加上10個像素的補白，以及每邊5個像素的邊框。邊距沒有計算在內。
ClientRect/TextRectangle 大小的每個值都是浮點數。
注意：
對於元素的邊界矩形位置的另一個影響是，如果他是嵌入的SVG中的一個I額foreignObject元素，在此情況下，topleft是相對foreignObject 的容器及其他內容；
getBoundingClientRect 和定位的一個有趣的小小怪現象時，Microsoft最初圍繞文檔元素添加了3個像素邊距，這影響到了 getBoundingClientRect 值。 如果你針對文檔使用該方法：
var tst = document.documentElement.getBoundingClientRect();
console.log(tst.top)
對於 IE9、Firefox、Safari、Chrome和Opera，你將得到值 0； 但是，對於IE7 你將得到值2(文檔對象和其它元素對象都是2)；
對IE8,將得到值 -2（文檔對象是-2 ，其它元素是0）;