HTML DOM getBoundingClientRect（）方法

getBoundingClientRect（）方法

今天朋友问到了这个方法，为了防止以后使用忘记，先写下来，哦哈哈哈哈~。

官方解释：Element.getBoundingClientRect()方法返回元素的大小及其相对于视口的位置。

语法：rectObject = object.getBoundingClientRect();

返回对象：DOMRect 。对象包含了一组用于描述边框的只读属性——left、top、right和bottom，单位为像素。除了 width 和 height 外的属性都是相对于视口的左上角位置而言的。

返回值的类型

rectObject.top：元素上边到视窗上边的距离;

rectObject.right：元素右边到视窗左边的距离;

rectObject.bottom：元素下边到视窗上边的距离;

rectObject.left：元素左边到视窗左边的距离;

兼容性：IE5以上都兼容；IE7以上兼容wid容width和hight。

浏览器兼容

参考文献

1、https://developer.mozilla.org/zh-CN/docs/Web/API/Element/getBoundingClientRect

2、https://www.jianshu.com/p/824eb6f9dda4