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