clientHeight scrollHeight offsetHeight

<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

 

滚动时通常我们只能scrollTop,当scrollTop为 0 到 scrollHeight-clientHeight  是正常的滚动距离,否则就是滚动过头了(手机上的上下拉取)!

posted on 2019-02-16 16:30  蒂其之死  阅读(561)  评论(0编辑  收藏  举报

导航