JS获取屏幕、浏览器、网页宽度和高度
在浏览器中，用 JS 获取高度和宽度都各有 3 种，分别包括屏幕，浏览器和网页的。
# 屏幕宽高
console.log('宽度：', window.screen.width)
console.log('高度：', window.screen.height)
2
# 浏览器可用工作区的宽高
浏览器宽高是指浏览器窗口最大化时的宽高，普通的最大化后，一般就是去掉系统任务栏高度，而宽度和屏幕宽是一样的。这个宽高在任务栏占用空间变化时会变化。
console.log('宽度：', window.screen.availWidth)
console.log('高度：', window.screen.availHeight)
2
# 网页宽高
网页宽高，是指页面所占的宽高，浏览器除了页面内容以外的部分，不计算在内。标签栏，地址栏，书签栏，控制台等全不计算在宽高的范围里面，只有网页内容区域才是。
console.log('宽度：', window.innerWidth)
console.log('高度：', window.innerHeight)
2
# 元素的 client、offset、scoll 宽高
document.body.clientWidth //网页可见区域宽(body)
document.body.clientHeight //网页可见区域高(body)
document.body.offsetWidth //网页可见区域宽(body)，包括border、margin等
document.body.offsetHeight //网页可见区域宽(body)，包括border、margin等
document.body.scrollWidth //网页正文全文宽，包括有滚动条时的未见区域
document.body.scrollHeight //网页正文全文高，包括有滚动条时的未见区域
document.body.scrollTop //网页被卷去的Top(滚动条)
document.body.scrollLeft //网页被卷去的Left(滚动条)
window.screenTop //浏览器距离Top
window.screenLeft //浏览器距离Left
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# 区分 clientWidth、offsetWidth、scrollWidth
# clientWidth/clientHeight
clientWidth和clientHeight计算时包含的是content和padding
不包括border、margin、滚动条，对于inline元素这个属性一直是 0
# offsetWidth/offsetHeight
offsetWidth/offsetHeight计算时包含 content + padding + border
不包括margin的元素的高度。对于inline的元素这个属性一直是 0
# offsetTop/offsetLeft/offsetRight/offsetBottom：
代表元素距离父级元素的相对距离，但是父级元素需要具有 relative 定位，直到找到 body，并且即使元素会被滚动，这个值也不会改变
# scrollWidth/scrollHeight
scrollWidth/scrollHeight 返回值包含 content + padding + 溢出内容的尺寸，这个只针对 dom 的子元素出现溢出情况时，才有效果，不然它始终和 clientHeight 相等
# scrollTop
代表在有滚动条时，滚动条向下滚动的距离也就是元素顶部被遮住部分的高度。
注意：这个属性表示的是容器，不是容器内元素
# getBoundingClientRect()
它返回一个对象，其中包含了 left、right、top、bottom 四个属性，分别对应了该元素的左上角和右下角相对于浏览器窗口（viewport）左上角的距离
注意:当元素溢出浏览器的视口，值会变成负数。
但是滚动元素是从可视区域的左上角和右下角开始计算，如果想获取滚动元素整体的坐标，需要加上滚动距离