JavaScript之 scrollHeight offsetHeight clientHeight 详解

在以前初学前端的时候  总是被这几个搞得不明白。  后来用的多了写的多了，也明白了，但自己还是想写份文章解释一下，就当为自己做份笔记

先写个说明：

　　scrollWidth：对象的实际内容的宽度，不包边线宽度，会随对象中内容超过可视区后而变大。      
　　clientWidth：对象内容的可视区的宽度，不包滚动条等边线，会随对象显示大小的变化而改变。 
　　offsetWidth：对象整体的实际宽度，包滚动条等边线，会随对象显示大小的变化而改变。

简单说明：  scrollWidth 是根据对象内容的实际宽度（高度） 而决定的。

　　　　　  clientWidth 是根据对象的可视宽度    width+padding

　　　　　  offsetWidth 是根据对象的实际宽度    width+padding+border

其实就已经很好理解了。 再看个图就立即明白了

 

 

 

上面打印结果自己算出来就可以了，简单明了。。   over.