小结clientHeight,innerHeight,offsetHeight,scrollHeight

3689

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动~

傻傻分不清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,横向滚动条(如果有的话)
  • 返回的是数值

MDN reference:
image.png

offsetHeight

  • 返回该元素的像素高度,高度包含该元素的垂直内边距和边框,且是一个整数
  • 它是一个只读属性
  • 是CSS高度的衡量标准,包括元素的边框、内边距和元素的水平滚动条(如果存在且渲染的话),不包含:before或:after等伪类元素的高度
  • 如果元素被隐藏(元素或者元素的祖先之一的元素的style.display被设置为none),则返回0
  • offsetHeight会被四舍五入为整数值,如果需要一个浮点数值,请用 element.getBoundingClientRect().

MDN reference:
image.png

对比clientHeight和offsetHeigt

image.png

image.png

innerHeight

  • 返回window的内部高度,包括横向滚动条
  • 与之对应的还有一个outerHeight,是整个浏览器窗口的大小,包括窗口标题、工具栏、状态栏等

MDN reference:
image.png

获取浏览器高度的兼容写法

image.png

当设置了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'>了,表现为: cb41c23b005a4d2b26c682833e2e970.png
当不设置viewport meta,表现为: 7059d314b27aad71aa5f45904aaaab9.png

scrollHeight

  • 一个元素内容高度的度量,包括由于溢出导致的视图中不可见内容
  • 没有垂直滚动条的情况下,scrollHeight值与元素视图填充所有内容所需要的最小值clientHeight相同
  • 包括元素的padding,但不包括元素的border和margin
  • scrollHeight也包括::before,::after这样的伪元素 MDN reference: image.png

References:
harttle.land/2016/04/24/…
www.geeksforgeeks.org/what-is-the…