JavaScript offset 和 style 的区别

1. offset 系列属性简介

element.offsetWidth ： 获取自身元素的宽度【padding + border + width】

element.offsetHeight ：获取自身元素的高度 【padding + border + height】

element.offsetLeft ： 获取自身左边框【border】距离父元素【必须是带有定位的父元素】的距离，若父元素均无定位，则以body为准

element.offsetTop ： 获取自身上边框【border】距离父元素【必须是带有定位的父元素】的距离，若父元素均无定位，则以body为准

element.offsetParent ： 返回父元素【必须是带有定位的父元素】，否则返回body

联想到element.parentNode ： 返回父元素【无论父元素是否带有定位】

2. offet 系列属性 和 style 属性 的区别

offset：1. offset 可以获取任意样式表中的样式

　　　  2. offset 系列获取的数值不带有单位

　　     3. offsetWidth 包含 padding + border + width

　　　 4.  offset 系列属性是只读属性，不可赋值

综上，offset系列属性适用于获取值，而非修改值

style： 1. 只能获取行内样式表的值

　　　 2. 获取的数值带有单位px

　　     3. width 不包括 padding 以及 border

　　     4. 属性可以修改

综上，style适用于修改元素值