三张图看懂 clientheightoffsetheightscrollheight

Posted zengyunchun

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了三张图看懂 clientheightoffsetheightscrollheight相关的知识,希望对你有一定的参考价值。

clientheight

  clientheigh: 内容的可视区域,不包含border。

  clientheight=padding + height - 横向滚动轴高度。

The Element.clientHeight read-only property is zero for elements with 
no CSS or inline layout boxes, otherwise it’s the inner height of an 
element in pixels, including padding but not the horizontal scrollbar 
height, border, or margin. 
技术分享图片

offsetheight

  offsetheight:它包含padding、border、横向滚动轴高度。 

  offsetheight=padding+height+border+横向滚动轴高度

The htmlElement.offsetHeight read-only property is the height of the element including vertical padding and borders, as an integer. 
Typically, an element’s offsetHeight is a measurement in pixels of the element’s CSS height, including border, padding and the element’s horizontal scrollbar (if present, if rendered). 
For the document body object, the measurement includes total linear content height instead of the element’s CSS height. Floated elements extending below other linear content are ignored. 
技术分享图片

scrollheight

  scrollheight:可滚动高度,就是将滚动框拉直,不再滚动的高度,这个很好理解。scrollHeight通常用在iframe自适应内容高度的情况。

The Element.scrollHeight read-only property is a measurement of the height of an element’s content, including content not visible on the screen due to overflow. 
The scrollHeight value is equal to the minimum height the element would require in order to fit all the content in the viewpoint without using a vertical scrollbar. It includes the element’s padding, but not its border or margin. 
技术分享图片










以上是关于三张图看懂 clientheightoffsetheightscrollheight的主要内容,如果未能解决你的问题,请参考以下文章

31张图看懂初高中所有英语语法

三张图看遍Linux 性能监控测试优化工具

一张图看懂项目管理的47个过程(干货)

一张图看懂微服务架构路线

一张图看懂微服务架构路线

一张图看懂sql的各种join