一、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取最近的谁人父级米素。

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