博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
三张图看懂 clientheight、offsetheight、scrollheight
阅读量:5926 次
发布时间:2019-06-19

本文共 1467 字,大约阅读时间需要 4 分钟。

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. 
这里写图片描述

转载于:https://www.cnblogs.com/ZengYunChun/p/9323006.html

你可能感兴趣的文章
切图崽的自我修养-[TOOL] 常用命令行操作
查看>>
ios开发学习-xib文件的使用
查看>>
阿里天猫魔盒 TV 资深前端工程师刘丹:兴趣是最好的老师
查看>>
用openssl生成CA证书
查看>>
用 CvANN_MLP(OpenCV 的神经网络-多层感知器) 进行路牌判别
查看>>
又一款 Fish Shell 主题: eden
查看>>
magento 1只有登录后才能访问网站
查看>>
LinkedHashSet内部是如何工作的(翻译)
查看>>
不一样的山顶角
查看>>
chrome扩展开发之旅 第五篇
查看>>
JS递归与二叉树的遍历
查看>>
基于HTML5的WebGL呈现A星算法的3D可视化
查看>>
Android Studio 1.5 RC1搭建NDK开发环境
查看>>
Apache JMeter 5.1.1 发布,压力测试工具
查看>>
2018届各大互联网公司校招薪资曝光汇总
查看>>
如何用 CSS 和 D3 创作一个无尽的六边形空间
查看>>
架构师必须要知道的阿里的中台战略与微服务
查看>>
快速体验 Sentinel 集群限流功能,只需简单几步
查看>>
手把手教你用RecyclerView实现猫眼电影选择效果
查看>>
《wireshark网络分析实践》1:wireshark简介
查看>>