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() 的值只相对于可视去窗口。