理解javascript offsetHeight / offsetWidth 与 clientHeight /clientWidth 以及 scrollHeight/scrollWidth的含义

首先介绍一个api：

someHtmlNode.getBoundingClientRect

可以看到里面包含了该元素的各个尺寸位置信息，尤其注意他的坐标（x,y）其实在浏览器中，我们把可视区域左上角的坐标定为(0,0)，那么任何一个元素都在这个坐标系内。

之说以引入坐标系的概念，因为offset这个单词的意思是偏移。顾名思义，即当前元素相对于坐标原点的偏移量。

所以offsetLeft 和 offsetTop分别是指当前元素距离坐标原点的偏移距离。

同理offsetHeight 与 offsetWidth是其自身在页面中所占的的宽高。

而client可以理解为可绘制区域，就好像一张画布，完整区域就是client区域，而画布的相框，是不算的。当然在页面中还应排除滚动条。

所以可以简单理解为offsetHeight/offsetWidth包含了clientHeight/clientWidth

最后，scollHeight和scollWidth，这有一个viewport视口的概念，就像你用放大镜去看一张地图，放大镜就那么大，大小就是clientWidth和clientHeight，而完整地图就是scrollWidth和srollHeight，也就是页面完整被铺开的大小。

当然如果发生滚动了，那么x y 方向的滚动距离就是scrollLeft, scrollTop。值得注意的是，这两个值显然是相对于可视区（client而非offset）的滚动距离。

最后，有个值得注意的地方：页面的根元素html节点的出现滚动条的时候，并不会影响到client和offset两个值的不同。

其中documentElement是指文档的根元素，也就是html标签

以上