关于这三个属性,首先想说的是,它们都是只读属性,什么是只读,相信不用我多说。
接下来,图文说明一下三个属性
1.element.clientHeight
看到上图相信已经很直观的知道什么是clientHeight,其实就是可视区高度,它返回元素内部的高度(单位像素),包含内边距,但不包括水平滚动条、边框和外边距。
2.element.scrollHeight
有时候在我们的布局中会出现overflow这样的样式从而导致部分内容不可见。而scrollHeight返回的是元素的内容高度(包括overflow导致的不可见内容)。在没有垂直滚动的情况下,它其实等于clientHeight。同样的,包括元素的padding而不包括margin
小提示:
判定元素是否滚动到底?
如果元素滚动到底,下面等式返回true,没有则返回false.
element.scrollHeight - element.scrollTop === element.clientHeight
3.element.offsetHeight
offsetHeight相对就比较简单的了,它包括元素的边框、内边距和元素的水平滚动条(如果存在且渲染的话)以及元素内容高度(这里指的是渲染出来的部分,即可见部分的内容),不包含:before或:after等伪类元素的高度。