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）;