JS: innerWidth/Heigt、outerWidth/Height、offsetWidth/Height、clientWidth/Height、scrollWidth/Height

目录

1. document.compatMode： 获取浏览器当前的渲染模式
2. window.screen.width: 获取屏幕的水平宽度
3. window.screen.height: 获取屏幕的垂直高度
4. window.screen.availWidth: 获取屏幕的水平可用宽度
5. window.screen.availHeight: 获取屏幕的水平可用高度
6. window.outerWidth: 获取浏览器窗口实际宽度
7. window.outerHeight: 获取浏览器窗口实际高度
8. window.innerWidth: 获取浏览器可视区的宽度+纵向滚动条的宽度
9. window.innerHeight: 获取浏览器可视区的高度+横向滚动条的高度
10. document.documentElement.clientWidth: 获取浏览器可视区的宽度
11. document.documentElement.clientHeight: 获取浏览器可视区的高度
12. document.documentElement.offsetWidth: 获取文档根元素本身的实际宽度
13. document.documentElement.offsetHeight: 获取文档根元素本身的实际高度
14. document.documentElement.scrollWidth: 获取文档根元素的实际内容宽度
15. document.documentElement.scrollHeight: 获取文档根元素的实际内容高度
16. document.body.clientWidth: 获取body元素的内边距区域宽度
17. document.body.clientHeight: 获取body元素的内边距区域高度
18. document.body.offsetWidth: 获取body元素本身的实际宽度
19. document.body.offsetHeight: 获取body元素本身的实际高度
20. document.body.scrollWidth: 获取body元素的实际内容宽度
21. document.body.scrollHeight: 获取body元素的实际内容高度
22. element.clientWidth: 获取元素的内边距区域宽度
23. element.clientHeight: 获取元素的内边距区域高度
24. element.offsetWidth: 获取元素本身的实际宽度
25. element.offsetHeight: 获取元素本身的实际高度
26. element.scrollWidth: 获取元素的实际内容宽度
27. element.scrollHeight: 获取元素的实际内容高度

标准模式(CSS1Compat)

一、获取屏幕宽高

注意：受系统分辨率设置的影响

1. 获取屏幕的实际宽高

**所有浏览器都兼容**
window.screen.width: 获取屏幕的水平宽度
window.screen.height: 获取屏幕的垂直高度

2. 获取屏幕的可用宽高

**所有浏览器都兼容**
window.screen.availWidth: 获取屏幕的水平可用宽度(任务栏的宽度除外)
window.screen.availHeight: 获取屏幕的垂直可用高度(任务栏的高度除外)

二、获取浏览器宽高

1. 获取浏览器的实际宽高

**IE9以下不支持**
window.outerWidth: 获取浏览器窗口实际宽度
window.outerHeight: 获取浏览器窗口实际高度

2. 浏览器可视区宽高（visualViewport）

视窗：正常情况下眼睛能看到的显示页面的区域（受物体的远近影响）。

*IE9以下为undefined*
window.innerWidth:获取浏览器视窗的宽度（包含纵向滚动条的宽度）
window.innerHeight: 获取浏览器视窗的高度（包含横向滚动条的高度）

---

*所有浏览器都兼容*
document.documentElement.clinetWidth
获取浏览器视窗的宽度（不包含纵向滚动条的宽度）
document.documentElement.clientHeight
获取浏览器视窗的高度（不包含横向滚动条的高度）

---

document.documentElement.offsetWidth
获取DOM文档根元素的宽度(box-sizing:content;)
offsetWidth=内容宽度(width)+左右内边距+左右边框宽度
左右内边距： padding-left + padding-right
左右边框宽度: border-left-width + border-right-width

document.documentElement.offsetHeight
获取DOM文档根元素的高度(box-sizing:content;)
offsetHeight