一、offsetWidth与offsetHeight： 

 获取的是元素的实际宽高 = width + border + padding 

 注意点： 

 1.可以获取行内及内嵌的宽高 
 2.获取到的值是一个number类型，不带单位 
 3.获取的宽高包含border和padding 
 4.只能读取，不能设置

console.log ( div.offsetWidth );//width + border + padding
console.log (div.offsetHeight );//height + border + padding

二：offsetLeft与offsetTop: 

offsetLeft:获取自己左外边框与父级元素的左内边框的距离 
offsetTop:获取自己上外边框与父级元素的上内边框的距离

offsetTop 和　style.top 的区别：

１．最大区别在于 offsetLeft 可以返回没有定位盒子的距离左侧的位置。 而 style.top 不可以 只有定位的盒子 才有 left top right
２．offsetTop 返回的是数字，而 style.top 返回的是字符串，除了数字外还带有单位：px。
３．offsetTop 只读，而 style.top 可读写。
４．如果没有给 html 元素指定过 top 样式，则 style.top 返回的是空字符串。
５．最重要的区别 style.left 只能得到 行内样式 offsetLeft 随便

三：offsetParent:获取最近的定位父元素 （自己定位参照的父元素）

注意点： 

1.如果元素自身是固定定位（fixed），则定位父级是null
2.如果元素自身是非固定定位,并且所有的父元素都没有定位，那么他的定位父级是body
3.body的定位父级是null

offsetParent 和 parentNode的区别：

如果当前元素的父级元素没有进行css定位（position为absolute或relative），offsetParent为body。 
如果当前元素的父级元素中有CSS定位（position为absolute或relative），offsetParent取最近的那个父级元素。

链接: https://www.fly63.com/article/detial/2651