offsetX,offset Left,offset Widthの違いの詳細

offsetX,offset Left,offset Widthの違い
offsetX/offsetY
オフセットXとoffsetYは、最近の親レベルの要素に対する座標(親レベルの位置に関係なく)を表します.

.big{
      width: 200px;
      height: 200px;
      border: 1px solid red;
      position: absolute;
      top: 100px;
      left: 100px;
}
.box{
     width: 100px;
     height: 100px;
     border: 1px solid green;
     margin-left: 50px;
}

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

var box = document.getElementsByClassName('box')[0];
var big = document.getElementsByClassName('big')[0];

big.onclick = function(e){
    e = e || window.event;
    console.log(e.offsetX);//      box              box   ，      big             big   ，          。
}

offset Left/offset Top
要素が最近の親レベル要素の座標に対して、すべての親レベルに位置していない場合、ドキュメント全体に対して

.big{
     width: 200px;
     height: 200px;
     border: 1px solid red;
     /* position: absolute; */
 }
.small{
     width: 100px;
     height: 100px;
     border: 1px solid green;
}

<div class="big">
     <div class="small"></div>
</div>

var small = document.getElementsByClassName('small')[0];
var big = document.getElementsByClassName('big')[0];

console.log(small.offsetLeft); //  position   9，  position   0

offset Width/offset Height
要素の視覚サイズを返します.

.big{
     width: 200px;
     height: 200px;
     border: 1px solid red;
     position: absolute;
     top: 100px;
     left: 100px;
}
.box{
     width: 100px;
     height: 100px;
     border: 1px solid green;
     margin-left: 50px;
}

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

var box = document.getElementsByClassName('box')[0];
var big = document.getElementsByClassName('big')[0];

console.log(big.offsetWidth);//202
console.log(box.offsetWidth);//102

注意:offset Leftとoffset Widthはともにdom要素上の属性であり、offsetXはfunction上のイベントの属性である.