DOM元素中height, clientHeight,offsetHeight等，到底是什么？

Posted 2020-09-28

<div  style="height:200px;padding:10px;border:1px solid green;"></div>

对于上面的div，它的border的height有多高？答案是200+10*2+1*2=222。

直接上结论：
在style或css样式中的 height:200px  指的是内容可视区的高度，不含内边距，不含border，不含外边距，而不是div的高度。

以下结论在 firefox、chrome、IE10+、QQ浏览器中都测试过，都是一致的：

clientHeight: 可理解为内部可视区高度，样式的height+上下padding(本例即220）。

scrollHeight: 内容的实际高度+上下padding（如果没有限制div的height，即height是自适应的，一般是scrollHeight==clientHeight）

offsetHeight:可理解为div的可视高度，样式的height+上下padding+上下border-width。（本例是222）

height 这个变量在几个浏览器中都是undefined

style.height这个变量在本例中是‘200px‘，不过遗憾的是只有将高度定义在元素的style属性中这个变量才有效，如果是抽取到了样式表中是无法取到的。

 

clientTop: 容器内部相对于容器本身的top偏移，实际就是 上border-width （本例是1）

scrollTop: Y轴的滚动条没有，或滚到最上时，是0；y轴的滚动条滚到最下时是 scrollHeight-clientHeight（很好理解）

offsetTop: 可以理解为容器相对于document的top的绝对偏移。等于top+margin-top