两张图详解解元素位置宽度的属性（offsetHeight/ClientHeight/ScrollHeight/getBoundingClientRect）

• offsetWidth/offsetHeight 返回值包含content + padding + border，效果与 e.getBoundingClientRect()相同
• clientWidth/clientHeight 返回值只包含content + padding，如果有滚动条，也不包含滚动条
• scrollWidth/scrollHeight 返回值包含content + padding + 溢出内容的尺寸

getBoundingClientRect （IE67的left、top会少2px,并且没有width、height属性）可以用来获取元素位置， 比如我经常用来获取滚动之后元素距离顶端的距离为0来判断 是否滚动到元素这个位置，然后把头部设置为fixed，比如div.getBoundingClientRect().top。 当然上面的属性也可以做到比如： 页面元素距离浏览器工作区顶端的距离 (div.getBoundingClientRect().top) = div.offsetTop – (document.documentElement.scrollTop || document.body.scrollTop)