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的属性。