你真的了解getBoundingClientRect()？

1.object.getBoundingClientRect()

用于获取某个元素相对于视窗的位置集合。集合中有top, right, bottom, left等属性。没有参数，这个属性在ie5就开始支持。

2.返回值

object.getBoundingClientRect().top：元素上边到视窗上边的距离
object.getBoundingClientRect().right：元素右边到视窗左边的距离
object.getBoundingClientRect().bottom：元素下边到视窗上边的距离
object.getBoundingClientRect().left：元素左边到视窗左边的距离
object.getBoundingClientRect().width：元素宽度
object.getBoundingClientRect().height：元素高度
object.getBoundingClientRect().x：用于left
object.getBoundingClientRect().y：用于top

效果图

3.浏览器兼容

①ie5以上都能支持，ie9以上支持width/height属性
②但是IE6,7的left、top会少2px，且没有width、height属性。
③width和height：ie9以上支持width/height属性。
兼容ie6~ie8的width/height的写法：

var objWidth = rectObject.right - rectObject.left,
    objHeight = rectObject.bottom - rectObject.top;

原文作者：匆匆那年_海，博客主页：https://www.jianshu.com/u/910c0667c515
95后前端汉子，爱编程、优秀、聪明、理性、沉稳、智慧的程序猿一枚。