学习过js的人，相信都曾经被这堆东西困扰：
clientWidth,clientHeight,clientX，clientY,offsetX.offsetY ,offsetLeft,offsetTop ,offsetWidth,offsetHeight,
scrollTop,scrollLeft 等等，看着这堆东西就开始犯晕呕吐。
他们到底是干嘛滴那？今天就来让我们彻底击碎这群玩意，看看它到底都是啥？看完之后，你会发现原来so easy！！妈妈再也不用担心你犯晕了！
clientWidth:代表浏览器可视区的宽
clientHeight:代表浏览器可视区的高
浏览器可视区宽高变化时，clientWidth和clientHeight也跟着变化
offsetWidth:获取物体自身的宽
offsetHeight： 获取物体自身的高（如果有padding和border值，那么包含padding和border值）
offsetLeft：获取的是相对于父对象的左边距
offsetTop ：获取的是相对于父对象的上边距
scrollTop : 页面向上滚动的距离
scrollLeft ：页面向左滚动的距离
scrollWidth: 可滚动区域的宽度
scrollHeight： 可滚动区域的高度
clientY：当鼠标事件发生时，鼠标相对于浏览器y轴的位置；
screenX：当鼠标事件发生时，鼠标相对于显示器屏幕x轴的位置；
screenY：当鼠标事件发生时，鼠标相对于显示器屏幕y轴的位置；
offsetX：当鼠标事件发生时，鼠标相对于事件源x轴的位置
offsetY：当鼠标事件发生时，鼠标相对于事件源y轴的位置
下面通过详细的案例测试，来说明每一个的含义
1. clientWidth:代表浏览器可视区的宽；clientHeight,:代表浏览器可视区的高
<script>
var clientW = document.documentElement.clientWidth || document.body.clientWidth;
var clientH = document.documentElement.clientHeight || document.body.clientHeight;
document.write('clientWidth= '+clientW + " -- clientHeight"+clientH);
</script>
当我们缩小浏览器窗口，clientWidht值和clientHeight的值也跟着改变了
2 .offsetWidth,offsetHeight： 获取物体自身的宽和高（有padding和border值，包含padding和border值）
<style>
#box{
width: 100px;height: 100px;
border: 2px solid #c00;
}
</style><body>
<div id="box"></div>
<script>
var oDiv = document.getElementById('box');
var divW = oDiv.offsetWidth;
var divH = oDiv.offsetHeight;
document.write('offsetWidth= '+divW + " -- offsetHeight"+divH);
/* var clientW = document.documentElement.clientWidth || document.body.clientWidth;
var clientH = document.documentElement.clientHeight || document.body.clientHeight;*/
</script>
</body>
在加个padding值
#box{
width: 100px;height: 100px;
border: 2px solid #c00;
padding:5px;
}
3. offsetLeft：获取的是相对于父对象的左边距 ; offsetTop ：获取的是相对于父对象的上边距
红色的box的父级是浏览器窗口，所以红色box的left和top是相对于浏览器窗口的左边距和上边距
而绿色的box的父级是红色的box，所以绿色box的left和top值是相对于红色box的左边距和上边距
<div id="box">
<div id="box2"></div>
</div><style>
*{padding: 0;margin: 0;}
#box{
position: relative;left: 100px;top: 100px;
width: 400px;height: 400px;
border: 2px solid #c00;
}
#box2{
width: 200px;height: 200px;
border: 2px solid #0f0;
position: absolute;
left: 50px;top: 50px;
}
</style><script>
var oBox = document.getElementById('box');
var oBox2 = document.getElementById('box2');
var boxL = oBox.offsetLeft;
var boxT = oBox.offsetTop;
var box2L = oBox2.offsetLeft;
var box2T = oBox2.offsetTop;
document.write(' box的offsetLeft= '+boxL + " --box的offsetTop="+boxT+"<br>");
document.write(' box2的offsetLeft= '+box2L + " --box2的offsetTop="+box2T);
</script>4 .scrollTop : 页面向上滚动的距离
为了测试效果，我特意设定了5个width: 2000px;height: 400px的div，用不同的颜色区分了它们
有图可见：滚动条测量滚动条滚动的距离，只有70多px，而我们通过scrollTop获取到的值是400多px，可见scrollTop获取的是页面向上滚动了400多px，scrollLeft的也一样
<style>
*{padding: 0;margin: 0;}
.box{
/*position: relative;left: 100px;top: 100px;*/
width: 2000px;height: 400px;
}
.box1{background: green;}
.box2{background: blue;}
.box3{background: yellow;}
.box4{background: red;}
.box5{background: black;}
</style><div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
<div class="box box4"></div>
<div class="box box5"></div>window.onscroll = function () {
var scrollT = document.documentElement.scrollTop || document.body.scrollTop;
console.log(scrollT);
};5. scrollLeft ：页面向左滚动的距离
box1{background: green;width: 400px;height: 400px;}
box2{background: blue;width: 2000px;height: 400px;} window.onscroll = function () {
var scrollW = document.documentElement.scrollWidth || document.body.scrollWidth;
var scrollH = document.documentElement.scrollHeight || document.body.scrollHeight;
console.log(scrollW+"---"+scrollH);
};