BOM中的各种height
BOM中的高度属性主要涉及三块:screen、window、文档下的元素。
screen
其中screen最简单,代表着显示器的对象。
screen.height :屏幕高度,像素为单位。
screen.availHeight :屏幕高度送去Windows系统的任务栏的高度。
从左到右,分别是Edge Chrome Firefox。因为是同一个屏幕,所以三者的结果都是相同的。
screen.width 和 screen.availWidth 类似。因为水平方向没有任务栏,所以 screen.width == screen.availWidth 。
window
这里的window代表浏览器窗口,关于高度有两个:
- innerHeight
- outerHeight
window.outerHeight : 获取整个浏览器窗口的高度(单位:像素),包括侧边栏(如果存在)、窗口镶边和窗口调整边框。
window.innerHeight : 浏览器窗口的视口(viewport)高度(以像素为单位),如果存在水平滚动条,则包括它。
关于window的宽度类似:
- window.outerWidth : 获取浏览器窗口外部的宽度。表示整个浏览器窗口的宽度,包括侧边栏(如果存在)、窗口镶边和调整窗口大小的边框。
- window.innerWidth : 浏览器视口(viewport)宽度(单位:像素),如果存在垂直滚动条则包括它。
文档下的元素
文档下的元素的高度信息主要通过clientHeight这一属性获得。
clientHeight:
返回元素内部的高度(单位像素),包含内边距,但不包括水平滚动条、边框和外边距。
在下图中,element.clientHeight就是红色框内的高度。
关于文档中元素的clientHeight,我们主要关注这两个元素的:
- document.documentElement
- document.body
什么是 document.documentElement 元素呢?它代表着一个文档的根元素,如HTML文档的 <html> 元素,XML文档的根元素等等。
三者的关系
window.innerHeight document.documentElement.clientHeight 和 document.body.clientHeight 之间有什么关系呢?
window.innerHeight = document.documentElement.clientHeight +水平方向滚动条高度
Edge:因为没有水平方向滚动条,所以两者值相同
Chrome:因为有水平方向的滚动条,所以 window.innerHeight 比 document.documentElement.clientHeight 多了17px
而 document.body.clientHeight 就是body标签内的元素所占的高度(除了border和margin)。
clientHeight offsetHeight scrollHeight之间的关系
用一张图来说明,红色框中的是当前元素。
clientHeight :只有元素的内容区和padding
offsetHeight :元素的内容区 padding border margin scrollbar
scrollHeight :元素内容的实际高度,包含了溢出的部分
scrollTop :元素距离他容器顶部的像素距离