offset系列、client系列、scroll系列

前言

offset系列、client系列、scroll系列

一、offset系列

offsetWidth: width +  左右的padding + 左右的border
offsetHeight: height + 上下的padding + 上下的border
     1、父元素有定位
        offsetTop:  元素距离父元素上侧的距离
        offsetLeft: 元素距离父元素左侧的距离
     2、父元素没有定位
        offsetTop: 元素距离上侧浏览器的距离
        offsetLeft: 元素距离左侧浏览器的距离

二、client系列

clientWidth:  width + 左右的padding
clientHeight:  height + 上下的padding
clientTop:  上边框 border-top
clientLeft:  左边框 border-left

三、scroll系列

scrollWidth: width + 滚动条滚动的距离
scrollHeight：height + 滚动条滚动的距离
// scrollTop scrollLeft 可以设置
scrollTop: 上下滚动条滚动的距离
scrollLeft: 左右滚动条滚动的距离