原生JS中的scroll、offset、client总结

一、offset系列
（1）offsetWidth=width+左右pandding+左右border（small：100+102+22=122，big：200+102+52=230）
（2）offsetHeight=content+上下pandding+上下border（small：150+102+22=172，big：200+102+52=230）
（3）offsetLeft(需参考其定位父元素，此处为给big对象设置定位，所以两者均以body为参考对象，结果如下small:big对象的margin-left + border-left + padding-left + small对象的margin-left=20+5+10+15=50)
//给大盒子设置定位的情况下。小盒子的offsetLeft以大盒子为基准，计算如下：offsetLeft=big对象的margin-left+small对象的padding-left：10+15=25
（4）offsetTop：与offsetLeft类似，需不断向上寻找参考的父级定位对象，若没有，则以body为参考。
二、client系列
（1）clientWidth：width+左右padding（没有border）
（2）clientHeight:height+上下padding
（3）clientLeft:在没有滚动条的情况下，仅为左边框的宽度
（4）clientTop：没有滚动条的情况下，仅为上边框宽度
三、scroll系列
（1）scrollWidth：当对象内内容为空或者没有超出容器时，其宽度则等同于clientWidth,否则为其内部内容的真实宽度
（2）scrollHeight:当对象内内容为空或者没有超出容器时，其高度则等同于clientHeight,否则为其内部内容的真实高度
（3）scrollLeft:可以理解成超出容器的那部分宽度
（4）scrollTop:同上，文本超出容器的那部分高度，浏览器间存在兼容性问题，可以使用：
document.documentElement.scrollTop||window.pageYOffset||document.body.scrollTop处理兼容性代码
四、事件中的部分属性
e.offsetX、e.offsetY:鼠标相对于事件源元素（srcElement）的X,Y坐标，只有IE事件有这2个属性，标准事件没有对应的属性。
e.clientX、e.clientY：鼠标相对于浏览器可视区域的X，Y坐标，可视区域不包括工具栏和滚动条。
e.screenX、e.screenY:鼠标相对于显示器屏幕（screen）左上角的X,Y坐标。标准事件和IE事件都定义了这2个属性
补充：e.pageX、e.pageY:与e.clientX、e.clientY相类似，但是pageX和pageY是以页面为准，在有滚动的条件下，pageX/Y=clientX/Y+滚动的出去高度/宽度

<input type="button" value="点击" id="btn"><br>
    <h3>small对象</h3>
    <table>
        <tr>
            <td>offsetWidth:</td>
            <td><input type="text" id="offsetW"></td>
            <td>offsetHeight:</td>
            <td><input type="text" id="offsetH"></td>
            <td>offsetLeft:</td>
            <td><input type="text" id="offsetL"></td>
            <td>offsetTop:</td>
            <td><input type="text" id="offsetT"></td>
        </tr>
        <tr>
            <td>clientWidth:</td>
            <td><input type="text" id="clientW"></td>
            <td>clientHeight:</td>
            <td><input type="text" id="clientH"></td>
            <td>clientLeft:</td>
            <td><input type="text" id="clientL"></td>
            <td>clientTop:</td>
            <td><input type="text" id="clientT"></td>
        </tr>
        <tr>
            <td>scrollWidth:</td>
            <td> <input type="text" id="scrollW"></td>
            <td> scrollHeight:</td>
            <td><input type="text" id="scrollH"></td>
            <td>scrollLeft:</td>
            <td><input type="text" id="scrollL"></td>
            <td>scrollTop:</td>
            <td><input type="text" id="scrollT"><br></td>
        </tr>
    </table>
  <h3>big对象</h3>
  <table>
      <tr>
          <td>offsetWidth:</td>
          <td><input type="text" id="boffsetW"></td>
          <td> offsetHeight:</td>
          <td><input type="text" id="boffsetH"></td>
          <td> offsetLeft:</td>
          <td><input type="text" id="boffsetL"></td>
          <td>offsetTop:</td>
          <td><input type="text" id="boffsetT"></td>
      </tr>
      <tr>
        <td>clientWidth:</td>
        <td><input type="text" id="bclientW"></td>
        <td>clientHeight:</td>
        <td><input type="text" id="bclientH"></td>
        <td>clientLeft:</td>
        <td><input type="text" id="bclientL"></td>
        <td> clientTop:</td>
        <td><input type="text" id="bclientT"></td>
    </tr>
    <tr>
        <td>scrollWidth:</td>
        <td><input type="text" id="bscrollW"></td>
        <td>scrollHeight:</td>
        <td><input type="text" id="bscrollH"></td>
        <td>scrollLeft:</td>
        <td><input type="text" id="bscrollL"></td>
        <td>scrollTop:</td>
        <td><input type="text" id="bscrollT"></td>
    </tr>
  </table>
  <h3>事件中的参数</h3>
  <table>
      <tr>
          <th>e.offsetX:</th>
          <th>e.offsetY:</th>
          <th>e.clientX:</th>
          <th>e.clientY:</th>
          <th>e.screenX:</th>
          <th>e.screenY:</th>
      </tr>
      <tr>
          <td><input type="text" id="offsetX"></td>
          <td><input type="text" id="offsetY"></td>
          <td><input type="text" id="clientX"></td>
          <td><input type="text" id="clientY"></td>
          <td><input type="text" id="screenX"></td>
          <td><input type="text" id="screenY"></td>
      </tr>
  </table>
    <div id="big">
        <div id="small"></div>
    </div>

*{
        margin: 0;
        padding: 0;
    }
    #big{
        width: 200px;
        height:200px;
        background-color: blue;
        padding:10px;
        margin: 20px;
        border: 5px solid red;
    }
    #small{
        width:100px;
        height:150px;
        background-color:pink;
        padding:10px;
        margin: 15px;
        border: 1px solid red;
         overflow: auto;
    }`
    window.οnlοad=function(){
        function id$(ele){
            return document.getElementById(ele);
        }
        var btn=document.getElementById("btn");
        var small=document.getElementById("small");
        var big=document.getElementById("big");
        btn.οnclick=function(e){
            id$("offsetH").value=id$("small").offsetHeight;
            id$("offsetW").value=id$("small").offsetWidth;
            id$("offsetT").value=id$("small").offsetTop;
            id$("offsetL").value=id$("small").offsetLeft;
            id$("clientH").value=id$("small").clientHeight;
            id$("clientW").value=id$("small").clientWidth;
            id$("clientT").value=id$("small").clientTop;
            id$("clientL").value=id$("small").clientLeft;
            id$("scrollH").value=id$("small").scrollHeight;
            id$("scrollW").value=id$("small").scrollWidth;
            id$("scrollT").value=id$("small").scrollTop;
            id$("scrollL").value=id$("small").scrollLeft;
           
            id$("boffsetW").value=id$("big").offsetWidth;
            id$("boffsetH").value=id$("big").offsetHeight;
            id$("boffsetT").value=id$("big").offsetTop;
            id$("boffsetL").value=id$("big").offsetLeft;
            id$("bclientH").value=id$("big").clientHeight;
            id$("bclientW").value=id$("big").clientWidth;
            id$("bclientT").value=id$("big").clientTop;
            id$("bclientL").value=id$("big").clientLeft;
            id$("bscrollH").value=id$("big").scrollHeight;
            id$("bscrollW").value=id$("big").scrollWidth;
            id$("bscrollT").value=id$("big").scrollTop;
            id$("bscrollL").value=id$("big").scrollLeft;

            id$("offsetX").value=e.offsetX;
            id$("offsetY").value=e.offsetY;
            id$("clientX").value=e.clientX;
            id$("clientY").value=e.clientY;
            id$("screenX").value=e.screenX;
            id$("screenY").value=e.screenY;
        }
    }`