js获取距离

距离大小

一、offset系列 获取元素的偏移量

• 获得元素距离带有定位父元素的位置
• 获取元素自身的大小(宽度高度)
• 注意:返回的数值不带单位，offset只能获取不能赋值，赋值需要使用style

1. offsetParent 返回作为该元素带有定位的父级元素 如果父级都没有定位则返回body
2. offsetTop 返回元素相对带有定位父元素的上方的偏移
3. offsetLeft 返回元素相对带有定位父元素的左边框的偏移
4. offsetWidth 返回自身包括padding、边框、内容区的宽度，返回数值不带单位
5. offsetHeight 返回自身包括padding\边框、你内容区的高度，返回数值不带单位

二、 client

1. clientTop 返回元素上边框的大小
2. clientLeft 返回元素左边框的大小
3. clentWidth 返回自身包括padding、内容区的宽度，不包含边框，返回的数值不带单位
4. clientHeight 返回包括自身padding、内容的高度，不含边框，返回的数值不带单位

三、scroll

1. scrollTop 返回被卷去的上侧距离，返回的值不带单位
2. scrollLeft 返回卷去的左侧距离，返回数值不带单位
3. scrollWidth 返回自身实际的宽度，不包含边框，返回的数值不带单位

• 与clinetWidth的区别:假如盒子中的内容超出宽度，则获取包含超出部分的宽度

4. scrollHeight 返回自身的实际高度，不包含边框，返回的数值不带单位

• 与clinetHeight的区别:假如盒子中的内容超出高度，则获取包含超出部分的高度