对offsetHeight，clientHeight，scrollHeight的理解

Posted 2022-10-14 webkb

offsetHeight是包含contentHeight+padding+borderHeight+ScrollBarHeight的

clientHeight仅包含contentHeight+padding，不含borderHeight+ScrollBarHeight的

换句话就是外内问题。

打个比喻你买手机，卖家是给你配个盒子的，你用的时候不用盒子，但你要把存起来，最后还是放到盒子里，所占用的空间不仅包含手机，更要看盒子的宽度，至于margin那是盒子与盒子之间的距离。

再打个比喻，你书架上放了很多书，大多数书都是直接放书架上，但一些书用硬壳包装起来的。

scrollHeight包含了在有（或无）滚动条的情况下的不可见溢出部分，还包含::before，::after这样的伪元素。

如果是clientHeight是内，scrollHeight就是内部的深度，广度，折叠的长度。

打个比喻，你做电梯，你看见的是一层楼的高度，但是他可能是十几二十几层楼的高度。

再打个比喻，你从书架上拿了一本书放在书桌上阅读，你看到的只有一本书32K的大小，但他有很多页，如果200页，那他的长度就是32K * 200 。

当然很多时候offsetHeight，clientHeight，scrollHeight的值完全一模一样。

contentHeight为内容高度，怎么确定？有时候由内容高度自然确定，有时候也由样式强制指定。

document.documentElement的值，首先document.documentElement = html，body的上级。他就是打开浏览器除去浏览器的标题栏地址栏书签栏等高度的呈现出的内容。

他的clientHeight是一个固定的，就是刚才我们说的，但是offsetHeight，scrollHeight是变化的，他极可能小于clientHeight，也可以大于，当然也能等于。

或许他的clientHeight才有意义，就是刚才我们说的，可是offsetHeight，scrollHeight主要依托他的子元素body来确定吧（废话，html下就只有body了，除了由他还能由谁，谁不是由子元素确定？）我意思是指offsetHeight按说应该跟随的clientHeight的，但是显然html的offsetHeight脱离了clientHeight，二十直接跟body联系的。