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