offset和client和scroll

offset

offset翻译过来就是偏移量，我们使用offest系列相关属性可以动态的得到该元素的位置（偏移），大小等

• 获得元素距离带有定位父元素的位置
• 获得元素自身的大小（宽度高度）
• 注意：返回的值不带单位
• offset系列常用属性

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

关于offset和style的区别

获取元素的大小位置，用offseet
想要给元素更改值，用style

offset

• 可以得到任意样式表中的样式值
• 系列获取的数值是没有单位的
• offsetWidth包含padding+border+width
• offsetWidth等属性是只读属性，只能获取不能赋值

style

• style只能得到行内样式表中的样式值
• style.width获得的是带有单位的字符串
• style.width获得不包括padding和border的值
• style.width是可读写属性，可以获取也可以赋值

client系列

client就是客户端，我们使用client系列的相关属性来获取元素可视区的相关信息。通过client系列的相关属性可以动态的得到该元素的边框大小和元素大小。

• element.clientWidth/Height 与offset的区别就是不包含边框
• element.clientTop/Left返回元素边框的大小

scroll系列

真正的内容大小可以动态获得该元素的大小，滚动距离等等

当元素超出盒子的时候打印得到的是所有元素的高度长度。这里就可以自己加滚动条.
注意：element.scrollHeight/Width返回自身实际的宽度，不含边框。返回值不带单位

  overflow:auto;

scroll滚动事件当我们滚动条发生变化的时候触发

div.addElventListener('scroll',function(){

})

小结一下

对比	作用
element.offsetWidth	返回自身包括padding，边框，内容区的宽度，返回值不带单位
element.clientWidth	返回自身包括padding，内容区的宽度，不含边框，返回值不带单位
element.scrollWidth	返回自身的实际宽度，不含边框，返回数值不带单位

主要用法

• offset：经常用来获得元素的位置
• client：获取元素的大小
• scroll：经常用于获取滚动条距离
• 页面的滚动距离通过window.pageXOffset来获取的