关于js dom中宽高问题的记录

一、clientHeight与offsetHeight的区别：

• element.clientHeight : 在页面上返回内容的可视高度（不包括边框，边距或滚动条）
• element.offsetHeight：返回，任何一个元素的高度包括边框和填充及滚动条

上面例子的输出结果为： clientHeight 96 ， offsetHeight 100 。

我们在css上做一些小修改，将box-sizing改为content-box。此时结果会发生变化，变化的根本原因在于css盒子模型。当box-sizing为content-box时，即w3c标准，元素的内容区域不包含padding值。所以 此时css中定义的height+padding值会等于 clientHeight（120），height+padding+border等于offsetHeight（124） 。

二、clientHeight和scrollHeight的区别

值得注意的是scrollHeight 没有包含滚动工具条的高度，但scrollHeight是计算整个div中内容的高度(即滚动条拖动后显示的内容)，而clientHeight只是记录可视高度。

下面是demo,可copy运行

    
    
    
    
    
    


     

        
1111