很多场景下会需要在JavaScript中获取窗口或DOM元素的宽高，以及滚动高度。 例如：实现滚动效果、创建全屏布局、动态绝对定位等等。 本文就来介绍相关的DOM API： window.innerHeight , window.outerHeight , clientHeight , offsetHeight , scrollHeight , scrollTop 等（当然每个属性都有对应的Width）。
通过 window.innerHeight 和 window.outerHeight 可以得到整个窗口的高度。其中：
把 Height 改为 Width 同样有效，分别是 innerWidth 和 outerWidth 。
注意：IE8及以下不支持本节介绍的 window.innerHeight 等属性。
在不支持 window.innerHeight 的浏览器中，可以读取 documentElement 和 body 的高度， 它们的大小和 window.innerHeight 是一样的（其实不太一样，见下一小节）。
document.documentElement.clientHeightdocument.body.clientHeight
其中 documentElement 是文档根元素，就是 标签。
The Document.documentElement read-only property returns the Element that is the root element of the document (for example, the element for HTML documents). – MDN
body 顾名思义就是
标签了。这两种方式兼容性较好，可以一直兼容到IE6，就是写起来费劲。既然获取窗口大小存在浏览器兼容问题，在实践中通常使用下面的代码来兼容所有浏览器：
var height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
事实上后两种方式获取的高度和 window.innerHeight 是不一样的，这3个属性的值逐个变小。 具体说来， window.innerHeight 包括整个DOM：内容、边框以及滚动条。
其实使用 offsetHeight 作为Fallback要比 clientHeight 更好，更多的讨论请见下文。
在使用JavaScript控制页面滚动时（例如回到顶部），需要知道页面当前滚动到了哪里，以及滚动到的目标是哪里。 这便是滚动高度。这涉及到4个DOM属性， clientHeight , offsetHeight , scrollHeight , scrollTop 。
所有DOM元素都有上述4各属性，只需要给它固定大小并设置 overflow:scroll 即可表现出来。
clientHeight : 内部可视区域大小。
returns the inner height of an element in pixels, including padding but not the horizontal scrollbar height, border, or margin
offsetHeight ：整个可视区域大小，包括border和scrollbar在内。
is a measurement which includes the element borders, the element vertical padding, the element horizontal scrollbar (if present, if rendered) and the element CSS height.
scrollHeight ：元素内容的高度，包括溢出部分。
is a measurement of the height of an element’s content including content not visible on the screen due to overflow
scrollTop ：元素内容向上滚动了多少像素，如果没有滚动则为0。
the number of pixels that the content of an element is scrolled upward.
如下图：
对应的横向属性为： clientWidth , offsetWidth , scrollWidth , scrollLeft 。
