提示：document.documentElement 和 document.getElementsByTagName('html')[0] 是一样的；
1、视口大小(不包括滚动条，视口字面理解当然是不包括滚动条)，
document.documentElement.clientWidth
document.documentElement.clientHeight
即使给 html 元素显示设置了宽高，返回的值也仍然是视口的尺寸，这是非常特殊的，跟普通 ele.clientWidth 含义不同。
通常情况下，ele.clientWidth 指的是 ele，作为包含块，给于内部元素的一个视口，ele 的尺寸和 clienWidth 是相关的，详情戳clientWidth
按照这个逻辑，我们应该计算 html 的包含块，也就是初始包含块的 clientWidth，但是似乎没有接触初始包含块的接口，仅仅知道，在桌面端，他的尺寸和视口一致；
所以当我们设置
html {
height: 100%;
width: 100%;
}
其实，是将 html 的宽高设置为初始包含块的宽高，等于视口的宽高。
关于 body 的这个属性，如果消除了默认的 margin ,则和上方是相等的：
document.body.clientWidth
document.body.clientHeight
但是如果给 body 显示设置了宽高，返回的就不一定是视口的宽高了，这是普通元素的特性。
另外，浏览器窗口大小（浏览器窗口，自然是包括滚动条的）：
window.innerWidth
window.innerHeight
屏幕大小（设备像素，不常用，其实就是分辨率），即使浏览器缩小了，这个值也不会变，是屏幕。
screen.width
screen.height
2、文档大小（包含了超出文档的溢出部分）
document.documentElement.scrollHeight
document.documentElement.scrollWidth
文档大小（不包含超出文档的溢出部分，如果 overflow:hidden，那么和上面的是一致的，但这个属性耗性能）
document.documentElement.offsetHeight
document.documentElement.offsetWidth
3、文档滚动的大小
兼容移动端需要用：
window.pageXOffset
window.pageYOffset
别名 scrollX / scrollY ,IE 不兼容别名，兼容 pageXOffset / pageYOffset，但是 IE9 之前的两个都不兼容；
另一种常用的写法：
document.documentElement.scrollTop;
document.documentElement.scrollLeft;
可写可读，缺点是不兼容移动端；
4、元素相对于视口的位置
ele.getBoundingClientRect(); //包含4 个属性：left、top、right 和bottom
5、元素的大小（border-box，不包含溢出部分，包括溢出的用 ）
ele.offsetWidth;
ele.offsetHeight;
元素的大小（border-box 包括溢出的部分，如果溢出隐藏，和上面值一致 ）
ele.scrollWidth;
ele.scrollHeight;
6、元素滚动的大小，（应该是相对于包含块） 可写（当然包含块要处于溢出状态才行）
ele.scrollTop;
ele.scrollLeft;
html.scrollTop 相对于初始包含块，所以上文 html.scrollTop 计算文档相对于视口的偏移就是这个道理
7、元素相对于文档的位置（貌似没有原生的 API，推算就是，相对于视口的偏移 + 文档相当于视口的滚动）
ele.getBoundingClientRect().top+document.documentElement.scrollTop;
ele.getBoundingClientRect().left+document.documentElement.scrollLeft;
8、计算滚动条的宽度
function getScrollbarWidth() {
var para = document.createElement('p'),
styles = {
width: '100px',
height: '100px',
overflowY: 'scroll'
},
i, scrollbarWidth;
for (i in styles) { para.style[i] = styles[i]; };
document.body.appendChild(para);
scrollbarWidth = para.offsetWidth - para.clientWidth;
document.body.removeChild(para);
return scrollbarWidth;
}
参考资料：