【基础】offsetHeight、clientHeight和scrollHeight的区别

预知识

正常盒模型【box-sizing: content-box】

        对于宽度 width: 100px 的正常盒模型，这个 width 单纯的指元素 content 部分的高度，不包含 padding、border、margin。

        通常，元素默认是正常盒模型 box-sizing: content-box

怪异盒模型（IE 盒模型）【box-sizing: border-box】

        对于宽度 width: 100px 的怪异盒模型，这个 width 单纯的指元素 content + padding + border 部分的高度，不包含 margin。

例如

.box {
  box-sizing: border-box;
  width: 100px;
  padding: 10px;
  border-left: 3px;
  border-right: 2px;
  // 实际上content部分的宽度为:100-2*10-3-2=75px
}

        一般使用正常盒模型，以下针对正常盒模型来讨论。

offsetHeight

        获取元素的高度， 包含元素的 padding、border 部分。

        指的是元素的 content 部分(即 height) + 2 * padding + 2* border。

clientHeight

        获取元素的高度，包含元素的 padding 部分。

        指的是元素的 content 部分(即 height) + 2 * padding。

scrollHeight

        获取元素的高度，包含元素的 padding 部分。

        乍一看和clientHeight很像，但是和 clientHeight 的区别在于，它的高度要根据 内容content的实际尺寸决定。

例如：

        假设你 div 设置的 height:100px; padding: 10px; 此时 scrollHeight 计算得出 为 120px，看起来和 clientHeight 值一样。

        但若 div 内包含的元素实际高度大于 div 本身的高度，如 300px。此时 div 的 content 部分实际尺寸是 300px，那么 scrollHeight 就是：300+2*10=320px

<div class="div1">
  <div class="div2"></div>
</div>

.div1{
  // box-sizing: content-box; 默认就是
  height: 100px;
  padding:10px;
  border: 5px;
}
.div2{
  height: 300px;
}

注意

        scrollHeight 这个高度属性，包含了内容被卷起的长度。

        假如你的内容有 500px那么高 ，但是设置了 height: 200px; overflow-y:scroll；此时虽然页面会出现 y 滚动轴，看起来高度是 200px 高，实际上内容有 500px。

        scrollHeight 就是用来获取这个 500px 的，而此时 clientHeight = 200px，offsetHeight= 200px（此处均假设 padding 和 border 是 0 不作考虑）。

总结

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

参考：https://zhuanlan.zhihu.com/p/496799095