window.innerHeight（innerWidth）：表示可见区域的高度（宽度），如果底部（右侧）有滚动条，会把底部（右侧）滚动条的高度（宽度）计算进去，此方法适用于标准浏览器及IE9+。
document.documentElement.clientHeight（clientWidth）：表示可见区域的高度（宽度），不会把滚动条的高度宽度计算进去，此方法适用于标准浏览器及低版本IE标准模式。
document.documentElement.offsetHeight（offsetWidth）：首先offsetWidth获得的值与clientWidth一样，而offsetHeight获得的是整个文档的高度。
注意：
个人认为上面的documentElement不代表body。当一个element有border时，element.offsetHeight包含border的值，而element.clientHeight不包含border的宽度。
document.documentElement.scrollHeight（scrollWidth）：获得网页正文全文高和宽，包含边线宽度。
document.body.clientHeight（clientWidth）：首先clientWidth获得的值等于document.documentElement.offsetWidth剪去body边线宽度，而clientHeight获得的是整个body的高度减去边线宽度。
document.body.offsetHeight（offsetWidth）：获得的值等于document.body.clientHeight（clientWidth）加上body的边线（border）宽度，即这两个值取到到的包含边线宽度。
document.body.scrollHeight（scrollWidth）：获得网页正文全文高和宽，包含边线宽度。
document.body.scrollTop（scrollLeft）：浏览器窗口顶部与文档顶部之间的距离（浏览器窗口与文档左侧之间的距离），也就是滚动条滚动的距离。
window.pageYOffset（pageXOffset）：浏览器窗口顶部与文档顶部之间的距离（浏览器窗口与文档左侧之间的距离），也就是滚动条滚动的距离。
window.screen.height（width）：屏幕分辨率的高（宽）。
window.screen.availHeight（availWidth）：屏幕可用工作区高（宽）。
下面我们来解释一下offsetTop、clientTop、scrollTop分别代表什么：
offsetTop:距离上方或上层控件的位置，整型，单位像素。
clientTop:元素的内容区距离元素边缘的距离，即元素的边线宽度。
scrollTop:元素窗口顶部与元素顶部之间的距离，即元素内部滚动条滚动的距离。
网友评论