offsetX,offsetLeft,offsetWidth的区别详解

offsetX,offsetLeft,offsetWidth的区别

offsetX/offsetY

offsetX和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的坐标，和是谁触发事件的无关。
}

offsetLeft/offsetTop

元素相对于最近定位父级元素的坐标，若在所有的父级上都没有定位，则相对于整个文档

.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

offsetWidth/offsetHeight

返回元素的视觉尺寸（width+padding+border）

.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

注意：offsetLeft和offsetWidth都是dom元素上的属性，而offsetX是function上event的属性。