clientWidth[Height]
元素的可视区域大小，计算公式：width[height]+padding(如果有滚动条，要减去滚动条的宽度17px)
文档的可视区域大小会随着浏览器窗口的大小变化而变化，文档可视区域的获取：
document.documentElement.clientWidth;
document.documentElement.clientHeight;
offsetWidth[Height]
元素的占位大小，计算公式：width[height]+padding+border(不包括滚动条)
scrollWidth[Height]
内容的宽高，计算公式：width[height]+padding
如果div里面的内容超过父div，并且设置了overflow:hidden;则可以用scrollHeight获取内容的高度，下面div#inner的scrollHeight的计算公式为：样式高+padding-top
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style type="text/css">
#inner{
100px;height:100px;border: 1px solid red; overflow: hidden; padding: 10px;
}
.content{
height: 600px; 90px; background: red;
}
</style>
</head>
<body style="height:2000px;">
<div id="inner" >
<div class="content">内容</div>
</div>
<script>
var oDiv = document.getElementById('inner');
console.log(oDiv.scrollHeight);
</script>
</body>
</html>
scrollTop[Left]
滚动距离。
浏览器滚动距离的获取
document.documentElement.scrollTop; //非chrome浏览器
document.body.scrollTop; //只针对chrome浏览器
window.pageYOffset;