getBoundingClientRect() 与 offset

Element.getBoundingClientRect()方法返回元素的大小及其相对于视口的位置
语法
rectObject = object.getBoundingClientRect();
返回值：
返回 4个方向值 与 2个宽高值

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

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

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

rectObject.left：元素左边到视窗左边的距离;
rectObject.width：元素的宽度 （内容区+padding+border+滚动条）
rectObject.height：元素的高度 （内容区+padding+border+滚动条）

在这里需要注意的是：
right 方向的值是基于 元素右侧边框到可视区左边的距离
bottom方向的值是基于 元素底部到可视区顶部的距离

兼容性
方向值可兼容到ie7+；
宽高值兼容到ie9+;

对比
offset 的方向值需要考虑到父级，如果父级是定位元素，那么子元素的offset值相对于父元素，如果父元素不是定位元素，那么子元素的offset值相对于 可视区窗口。
getBoundingClientRect() 的值只相对于可视去窗口。
————————————————
版权声明：本文为CSDN博主「SevenBig」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/itSeven7/article/details/78855223