offsetHeight、clientHeight、scrollHeight的区别

1. 盒子模型

介绍这三个属性之前先来了解一下CSS盒子模型。

盒子模型顾名思义就是盒子的意思，盒子里面可以装很多东西。

组成一个完整的盒子主要包括下面几个部分：

• width
• height
• padding
• border
• margin
• box-sizing（用来区别正常盒模型和怪异盒子模型）

盒子模型又分为了正常盒模型和怪异盒模型。

1.1 正常盒模型

通过上图可以看出：宽度就是内容的宽度。当我们修改padding或者border属性时，盒子的总宽度会改变。

1.2 怪异盒子模型

通过上图可以看出：盒子的宽度 = 内容宽度 + padding + border。

简单了解了CSS中的盒子模型后，我们再来了解这三个高度属性。

2. offsetHeight

简单总结为一句话：获取元素的高度，包含padding和border。

3. clientHeight

简单总结为一句话：获取元素的高度，包含padding。

这个属性和offsetHeight类似，唯一的区别就是它不包含border。

4. scrollHeight

简单总结为一句话：获取元素的高度，包含padding。

这个属性和clientHeight类似，都不包含border。

scrollHeight和clientHeight区别：scrollHeight的高度需要更具内容的实际尺寸决定。

总结

• offsetHeight = 内容高度 + padding + border
• clientheight = 内容高度 + padding
• scrollHeight = 内容实际尺寸 + padding

参考原文档: https://zhuanlan.zhihu.com/p/496799095