オフセットシリーズとクライアントシリーズおよびスクロールシリーズの違い

オフセットシリーズ

<div class="box" id="box">
    </div>

 <style>
        * {
    
    
            margin: 0;
            padding: 0;
        }

        #box {
    
    
            width: 200px;
            height: 200px;
            border: 1px solid skyblue;
            background-color: skyblue;
            margin: 10px;
            padding: 5px;
        }
    </style>

 <script>
        var box = document.getElementById("box");
        console.log(box.offsetHeight);  //212
        //offsetHeight=height(200)+padding(5*2)+border(1*2)
         console.log(box.offsetWidth);   //212
         //offsetWidth=width(200)+padding(5*2)+border(1*2)
         console.log(box.offsetLeft);//10
         //offsetLeft=距离父元素的左边距离   box的父元素为body,在css样式中清空了body的内外边距，
         //因此只剩下box的外边距为10
          console.log(box.offsetTop);  //10
          //offsetLeft=距离父元素的上边距离   box的父元素为body,在css样式中清空了body的内外边距，
         //因此只剩下box的外边距为10
          console.log(box.offsetParent);  //父元素为body
    </script>

クライアントシリーズ

  var box = document.getElementById("box"); 
   console.log(box.clientHeight); //210
   //clientHeight=height(200)+padding(2*5)  //不包含边框
    console.log(box.clientWidth);   //210
    //clientWidth=width(200)+padding(2*5)   //不包含边框
    console.log(box.clientLeft);    //1
    //clientLeft=border-left(1)   //等于左边框的值
    console.log(box.clientTop);     //1
     //clientTop=border-top(1)   //等于上边框的值

スクロールシリーズ

 <style>
        * {
    
    
            margin: 0;
            padding: 0;
        }

        #box1 {
    
    
            width: 60px;
            height: 60px;
            margin-top: 100px;
            padding: 10px;
            border: 2px solid black;
            background-color: hsl(200, 67%, 13%);
            overflow: scroll;
            white-space: nowrap; 
        }

<div id="box1"> 嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯
嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯
</div>

 function $(id) {
    
    
            return document.getElementById(id);
        }
        console.log(($("box1").scrollHeight));  //566
        console.log(($("box1").scrollWidth));  //63
        //scrollWidth=width(60)+滚动条宽度（3）

3つの違い

offset series
offsetHeight：ボックスの高さ
offsetLeft：左
からの距離
offsetTop：上からの距離offsetWidth：ボックスの幅
offsetParent：配置された親要素を取得します

クライアントシリーズ（境界線を除く、内側の余白を含む）
clientTop：上部の境界線
clientLeft：左側の境界線
clientHeight：高さ+パディング
clientWidth：幅+パディング

スクロールイベント：
scrollHeight：コンテンツの高さ
scrollWidth：コンテンツの幅+スクロールバーの幅
scrollLeft：ページが左にスライドする距離