# 1、窗口显示区（可视区域）的宽度和高度，包括滚动条区域
//窗口中文档显示区域的高度，不包括菜单栏、工具栏等部分。该属性可读可写
window.innerHeight =>977
window.outerHeight =>1074（包括上方的菜单栏、工具条）
//窗口中文档显示区域的宽度，同样不包括边框。该属性可读可写。
window.innerWidth =>1920(包括了滚动条)
window.outerWidth=> 1914(不包括滚动条=>1920-6(滚动条的宽度))
1
2
3
4
5
6
2
3
4
5
6
为了兼容iE浏览器
const w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
const h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
1
2
3
4
5
6
7
2
3
4
5
6
7
# 2、窗口显示区（可视区域）的宽度和高度，不包括滚动条区域
document.documentElement指的是html元素
document.documentElement===document.querySelector("html");//=>true
1
document.documentElement.clientHeight=>977
document.documentElement.clientWidth=>1903(1920-滚动条的宽度)
1
2
2
# 3、元素的宽度和高度（注意，包括了不可见的区域）
document.body.clientHeight
document.body.clientWidth=>1903(默认情况下)
1
2
3
2
3
# 4、当前页面相对于窗口显示区左上角的 X /Y位置，即水平/垂直滚动条已滚动的距离
window.pageXOffset===document.documentElement.scrollLeft
window.pageYOffset===document.documentElement.scrollTop
1
2
2