js中offset、client、scroll【总结】

offset系列
offset动态的得到目标元素的位置（偏移）大小等

offset系列常用属性

offset系列属性	作用
element.offsetParent	返回作为该元素带有定位的父级元素 如果父级都没有定位则返回body
element.offsetTop	返回元素相对带有定位父元素上方的偏移
element.offset Left	返回元素相对带有定位父元素左边框的偏移
element.offsetWidth	返回自身包括padding、边框、内容区的宽度,返回数值不带单位
element.offsetHeight	返回自身包括padding、边框、内容区的高度,返回数值不带单位

offset属性示意图

client系列：可视区
使用client系列的相关属性 获取元素可视区的相关信息

client常见属性

client系列属性	作用
element.clientTop	返回元素上边框的大小
element.clientLeft	返回元素左边框的大小
element.clientWidth	返回自身包括padding、内容区的宽度，不含边框，返回数值不带单位
element.clientHeight	返回自身包括padding、内容区的高度，不含边框，返回数值不带单位

client属性示意图

scroll系列
scroll翻译过来就是滚动的,使用scroll系列的相关属性可以动态的得到该元素的大小、滚动距离等等

scroll系列常用属性

scroll系列属性	作用
element.scrollTop	返回被卷去的上侧距离,返回数值不带单位
element.scrollLeft	返回被卷去的左侧距离,返回数值不带单位
element.scrollWidth	返回自身实际的宽度,不含边框,返回数值不带单位
element.scrollHeight	返回自身实际的高度,不含边框,返回数值不带单位

scroll属性示意图