关于高度这个属性的小结

  • 在style或css样式中的 height:100px 指的是内容可视区的高度,不含内边距,不含border,不含外边距,而不是div的高度。

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

  • clientHeight: 可理解为内部可视区高度,样式的height+上下padding

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

  • offsetHeight:可理解为div的可视高度,样式的height+上下padding+上下border-width。

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

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

  • clientTop: 容器内部相对于容器本身的top偏移,实际就是 上border-width

  • scrollTop: Y轴的滚动条没有,或滚到最上时,是0;y轴的滚动条滚到最下时是 scrollHeight-clientHeight(很好理解)

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

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





你可能感兴趣的:(关于高度这个属性的小结)