javascriptにおけるoffset Width、client Width、inner Width及び関連する属性方法

jsのoffset Width、clientWidth、scrollwidthなどの一連の属性と方法についてはずっと間抜けで区別がつかないので、ここでこれらの方法の使い方と意味をまとめます。
一、clientWidthとclientHeigh、clientTopとclientLeft
1,clientWidthの実際幅
clientWidth= width+左右padding
2,clientHeighの実際の高度
clientHeigh=height+上下padding 
3,clientTopの実際の幅
clientTop=boder.top（上枠の幅）
4,clientLeftの実際幅
clientLeft=boder.left（左枠の幅）
二、offset Widthとoffset High、 offset Topとoffset Left
1,offset Widthの実際の幅
offset Width=width+左右padding+左右ボーダー
2,offset Heithの実際の高さ
offset Heith=height+上下padding+上下boder
3,オフセットトップ幅
offset Top：現在の要素の上辺から最寄の親レベルの上縁までの距離です。親レベルが決まっていない場合は、body上部と左側の距離になります。
4,offset Left実際幅
offset Left：現在の要素の左端から最寄の親レベル左端までの位置付け           距離。親レベルが決まっていない場合は、body上部と左側の距離になります。
三、scrollwidthとscrollHeight、scrollTopとscrollLeft
1，scrollwidth実際幅
scrollwidth：指定されたラベルコンテンツ層の真の幅（可視領域幅＋非表示領域幅）を取得する。
2，scrollHeightの実際の高度
scrollHeight：指定されたラベルのコンテンツ層の真の高さ（可視領域の高さ＋非表示領域の高さ）を取得します。
3，scrollTop
scrollTop：コンテンツ層上部から可視領域上部までの距離。
例：var scrollTop=document.documentElement.scrollTop||window.pageyoffset𞓜ドcument.body.scrollTop；高度を持続的に取得する方法:

window.addEventListener('scroll', ()=>{
var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
});

4，scrollLeft
scrollLeft：コンテンツ層の左端から可視領域の左端までの距離。
注意：下の元素の属性と元素の方法はすべてelem.属性またはelem.方法によって使います。window属性はwindow.属性によって使います。document属性はdocumentを通じて呼び出されます。

<script>
  /*
   ******       
   * offsetWidth      width +   padding +   border-width
   * offsetHeight      height +   padding +   border-width
   * 
   * clientWidth      width +   padding
   * clientHeight      height +   padding
   * 
   * offsetTop                top     
   * offsetLeft                left     
   * 
   * scrollWidth          ，              clientWidth
   * scrollHeight          ，              clientHeight
   * 
   ******         
   * 
   ****** Window    （   IE   [<IE9]   ） 【       ，          ？？？】
   * innerWidth           （         、   、   ） 
   * innerHeight           （         、   、   ）
   * ***** Window      
   * 
   ****** Document    
   * （   IE innerWidth、innerHeight     ）
   * document.documentElement.clientWidth           （         、   、   、   ）
   * document.documentElement.clientHeight           （         、   、   、   ）
   * 
   * document.documentElement.offsetHeight          （  body margin）
   * document.body.offsetHeight          （   body margin）
   * 
   * document.documentElement.scrollTop        top     （           ）
   * document.documentElement.scrollLeft        left     （           ）
   ****** Document      
   * 
   ******     
   * 1. getBoundingClientRect()      body
   * bottom:     （  border）          
   * left:      （   border）          
   * right:      （  border）          
   * top:     （   border）          
   * height:    offsetHeight
   * width:    offsetWidth
   * x:       x   
   * y:       y   
   * 
   * 2. scrollIntoView()          
   * 
   * *****       
   * 
   */
</script>

上のプロパティの中で、window.innerWidthとwindow.inner Heightについて、自分でテストした結果の値はスクロールバーが含まれていますが、ネットの教程と関連文書はスクロールバーが含まれていないと言いました。スクロールバーの幅は大きくないですが、全体的な影響も明らかではないです。
ここでは、javascriptのoffset Width、clientWidth、innerWidth及び関連する属性方法についての記事を紹介します。これに関連して、javascript offset Width clientWidth Inners Widthの内容を紹介します。以前の文章を検索したり、次の関連記事を引き続きご覧ください。これからもよろしくお願いします。