1、clientHeight
- 获取元素的可见高度,包括 padding, 不包括 margin , border , 和滚动条。
- clientHeight 和 clientWidth 都是不带 px 的,返回都是一个数字,可以直接计算
2、offsetHeight
- 获取元素的整个的大小,整个的高度和宽度,包括内容区、padding 、 border 和 滚动条, 不包括 margin
3、scrollHeight
- 当本元素的子元素比本元素高且overflow=scroll时,本元素会scroll
- scrollHeight 返回整个元素的高度(包括带滚动条的隐蔽的地方)
- 因为子元素比父元素高,父元素不想被子元素撑的一样高就显示出了滚动条,在滚动的过程中本元素有部分被隐藏了,scrollHeigh t代表包括当前不可见部分的元素的高度。而可见部分的高度其实就是clientHeight,也就是 scrollHeight>=clientHeight 恒成立。在有滚动条时讨论scrollHeight才有意义,在没有滚动条时 scrollHeight==clientHeight 恒成立。