javascriptの中の各種の幅の高さとイベントの対象の総括

参考記事:https://segmentfault.com/a/1190000002545307
1、原生の元素属性の理解

     clientWidth = padding*2 + width
     clientHeight = padding*2 + height
     clientLeft = border
     clientTop = border

     offsetParent                       
     offsetWidth = (padding+border)*2 + width
     offsetHeight = (padding+border)*2 + height
     offsetLeft =   offsetParent    
     offsetTop =   offsetParent    

     scrollTop                                 
     scrollLeft                                 
     scrollHeight               （   border）
     scrollWidth                （   border）

scrollTopとscrollLeftを除いて読み書きができます.残りの読み取り専用以上の戻り値は全部単位がありません.
2、obj.style.*属性はこの要素の行内パターンのみを取得できますが、この要素が最終的に計算されたスタイルはobj.current Style(IE)とget ComputterStyle(IE以外の他のブラウザ)を使って返された値はバンド単位の文字列です.

function getStyle(obj, attr){
  if(obj.currentStyle){
    return obj.currentStyle[attr];
  }else{
    return getComputedStyle(obj,false)[attr];
  }
}

3、Eventオブジェクトはjsにおいて、要素の動きについてはイベントオブジェクトに関わることが多いです.イベントオブジェクトにも多くの位置属性があります.また、ブラウザの互換性の問題で、これらの属性は相互に混淆されます.

clientXとclientYの属性は、イベント後、ブラウザ(視認領域)に対するマウスクリック位置の座標であり、ブラウザの左上隅(0,0)からマウスクリック位置の左上隅の位置を計算し始める.

screenXとscreenYはイベントが発生した時のマウスのスクリーンに対する座標であり、デバイス画面の左上隅を原点として、イベントが発生した時にマウスがクリックしたところは変更点のscreenXとscreenY値である.スクリーンに対してブラウザです.

offsetXとoffsetYのペアは、イベント時に、マウスのクリック位置がこのイベントソース(borderを含まない)の位置に対して、divをクリックして、マウスのクリック位置の座標を計算します.(注:firefoxはこの属性をサポートしていません.firefoxではこの属性に対応する概念は、event.layerXとevent.layerYです.この属性を使用するには互換性処理が必要です.)

var divX = event.offsetX || event.layerX;

PageXとPageYは、イベントが発生した時にマウスのクリック位置がページの位置に対して、通常のブラウザウィンドウにスクロールバーが現れていない場合、この属性とclientXとclientYは等価であるが、ブラウザにスクロールバーが出現すると、PageXは通常、clientXより大きくなり、ページには巻かれた部分の幅と高さがあるため、PageXとPageYは同じである.ページ全体の位置