整个窗口大小
innerHeight与outerHeight
通过window.innerHeight和window.outerHeight可以得到整个窗口的高度。其中：
- innerHeight是DOM视口的大小，包括滚动条。
- outerHeight是整个浏览器窗口的大小，包括窗口标题、工具栏、状态栏等。
整个窗口
把Height改为Width同样有效，分别是innerWidth和outerWidth。
clientHeight
在不支持window.innerHeight的浏览器中，可以读取documentElement和body的高度， 它们的大小和window.innerHeight是一样的（其实不太一样，见下一小节）。
document.documentElement.clientHeight
document.body.clientHeight
// 其中documentElement是文档根元素，就是<html>标签。
body顾名思义就是<body>标签了。这两种方式兼容性较好，可以一直兼容到IE6。
最佳实践
既然获取窗口大小存在浏览器兼容问题，在实践中通常使用下面的代码来兼容所有浏览器：
var height = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
事实上后两种方式获取的高度和window.innerHeight是不一样的，这3个属性的值逐个变小。 具体说来：
-
window.innerHeight包括整个DOM：内容、边框以及滚动条。
-
documentElement.clientHeight不包括整个文档的滚动条，但包括<html>元素的边框。
-
body.clientHeight不包括整个文档的滚动条，也不包括<html>元素的边框，也不包括<body>的边框和滚动条。
滚动高度
在使用JavaScript控制页面滚动时（例如回到顶部），需要知道页面当前滚动到了哪里，以及滚动到的目标是哪里。 这便是滚动高度。这涉及到4个DOM属性：clientHeight, offsetHeight, scrollHeight, scrollTop。
所有DOM元素都有上述4各属性，只需要给它固定大小并设置overflow:scroll即可表现出来。
clientHeight: 内部可视区域大小。（只包含padding，不包含border、滚动条和margin）
offsetHeight：整个可视区域大小，包括border和scrollbar在内。
scrollHeight：元素内容的高度，包括溢出部分。
scrollTop：元素内容向上滚动了多少像素，如果没有滚动则为0。
图片来自网络
对应的横向属性为：clientWidth, offsetWidth, scrollWidth, scrollLeft。
网友评论