(一）基础区分

一、offsetHeight、scrollHeight、clientHeight

<div style="background: antiquewhite;width: 80px;height: 90px;position: absolute;left: 50px;top: 100px;overflow:scroll;" id="div2">l你好l<br />l白布a<br />隐隐约约<br />隐隐约约<br />隐隐约约<br /></div>

<script type="text/javascript">var tDiv = document.getElementById('div2');console.log("clientHeight:",tDiv.clientHeight,"scrollHeight:",tDiv.scrollHeight,"offsetHeight:",tDiv.offsetHeight);//显示：clientHeight: 73 scrollHeight: 144 offsetHeight: 90
</script>

注：每个浏览器不同，此标准为chorme。

二、offsetTop、scrollTop、clientTop

<div style="background: aquamarine;width: 200px;height: 200px;position: absolute;left: 50px;top: 50px;" id="div1"><div style="background: antiquewhite;width: 80px;height: 90px;position: absolute;left: 50px;top: 70px;overflow:scroll;border:solid 20px crimson;" id="div2">l你好l<br />l白布a<br />隐隐约约<br />隐隐约约<br />隐隐约约<br /></div>
</div>

<script type="text/javascript">var oDiv = document.getElementById('div1');var tDiv = document.getElementById('div2');console.log("clientTop:",tDiv.clientTop,"offsetTop:",tDiv.offsetTop);/显示结果：clientTop: 20 offsetTop: 70tDiv.scrollTop = 30;//让滚动条上移30
</script>

注：offsetTop是相对父元素而不是body。

三、event.clientX、event.offsetX

<div style="background: aquamarine;width: 200px;height: 200px;position: absolute;left: 50px;top: 50px;" id="div1"></div>

<script type="text/javascript">var oDiv = document.getElementById('div1');oDiv.onmousedown = function(e){onsole.log("clientX:",e.clientX,"offsetX:",e.offsetX);//点击右下角显示结果为：clientX: 249 offsetX: 199}
</script>

（二）应用区分

一、obj.style.top和obj.offsetTop

相同：他俩的值基本相同，但是用处不同

不同：

        1、obj.style.top可以赋值，所以当赋予div新的距离的时用obj.style.top。

        2、obj.style.top是字符串，所以获取时用offsetTop,它是数字，方便运算编程。

        3、obj.style.top取得字符串是带小数的字符串，offsetTop则是整数。

二、clientTop

clientTop基本不用。

三、e.client和mousemove的神奇搭配

e.client 在事件里应用,在mousemove的情况下随着鼠标的移动而改变，在其他情况下，只是简单的获取

四、offsetHeight和clientHeight 

在ovflow:hidden的情况下是相等的。在（一）基本区别中，是在overflow:auto visibilty scroll 等情况下。