小知识,大挑战!本文正在参与“程序员必备小知识”创作活动~
傻傻分不清clientHeight,innerHeight,offsetHeight,scrollHeight这些高度,今天的小知识就来总结一下~
🥳🥳🥳P.S. 欢迎点赞,评论,收藏~
🥳🥳🥳如有不足,欢迎指正哦~
clientHeight
元素的clientHeight,既然说是元素的,那html,body都是元素,那都会有clientHeight
- 对于html和body的clientHeight,返回的是viewport的高度,不算滚动条哦
- 它是个只读属性
- 对于inline box的元素,获取的值为0 (zero for elements with no CSS or inline layout boxes)
- 算的是元素内部的高度,包括padding,但是不包括border,margin,横向滚动条(如果有的话)
- 返回的是数值
offsetHeight
- 返回该元素的像素高度,高度包含该元素的垂直内边距和边框,且是一个整数
- 它是一个只读属性
- 是CSS高度的衡量标准,包括元素的边框、内边距和元素的水平滚动条(如果存在且渲染的话),不包含:before或:after等伪类元素的高度
- 如果元素被隐藏(元素或者元素的祖先之一的元素的style.display被设置为none),则返回0
- offsetHeight会被四舍五入为整数值,如果需要一个浮点数值,请用
element.getBoundingClientRect()
.
对比clientHeight和offsetHeigt
innerHeight
- 返回window的内部高度,包括横向滚动条
- 与之对应的还有一个outerHeight,是整个浏览器窗口的大小,包括窗口标题、工具栏、状态栏等
获取浏览器高度的兼容写法
当设置了viewport的meta,获取的clientHeight和innerHeight都会变化
这说明在获取浏览器viewport的高度上,由于viewport meta的加入,clientHeight和innerHeight会发生变化,这块和visual viewport, layout viewport, ideal viewport的知识相关,这里就先不展开了
当设置了
<meta name='viewport' content='width=device-width, initial-scale=1'>
了,表现为:
当不设置viewport meta,表现为:
scrollHeight
- 一个元素内容高度的度量,包括由于溢出导致的视图中不可见内容
- 没有垂直滚动条的情况下,scrollHeight值与元素视图填充所有内容所需要的最小值clientHeight相同
- 包括元素的padding,但不包括元素的border和margin
- scrollHeight也包括::before,::after这样的伪元素
MDN reference:
References:
harttle.land/2016/04/24/…
www.geeksforgeeks.org/what-is-the…