JS offset系列

一、offestTop和offsetLeft

        到父元素的上边和左边的距离，注意父元素必须是有定位position:relative;或absolute;

        element.offsetTop 返回该元素距离带有定位父元素的上边距离，没有的话返回与body的距离

        element.offsetLeft 返回该元素距离带有定位父元素的左边距离，没有的话返回与body的距离

二、offsetWidth和offsetHeight

        element.offsetWidth 返回该元素宽度

        element.offsetHeight 返回该元素高度

        注意宽度和高度包含了padding+border+width

        如果需要只包含width和height，可以用box-sizing:border-box;

         

三、offsetParent

        element.Parent 返回该元素离他最近一级的带有定位的父元素

        与element.parentNode不同，它是直接返回其父元素，不管有没有定位。

四、offset和style区别

        offset没有单位，只读，包含padding+border+width,获取任意样式表。

        style有单位，可读可修改，只包含width,只能获取行内样式表。

        一般来说获取属性用offset，修改属性用style。