offset/client/scroll

一、元素偏移量offset系列

• 获得元素距离带有定位父元素的位置，获得元素自身的大小，返回值不带单位
• offsetWidth&offsetHeight：返回自身包括padding，边框，内容区的宽度
• offset与style的区别

1. offset：可以得到任意样式表中的样式值；获取的数值没有单位；包含padding+border+width；只读属性，不能赋值      
2. style：只能得到行内样式值；获取的是带单位的字符串；获得不包含padding和border的值；可读属性，可赋值
3. 所以，想要获取元素大小位置，offset更加合适；想要给元素更改值，需要用style改变。

二、元素可视区client系列

• 可以动态的得到元素的边框大小，元素大小等
• clientWidth&clientHeight​：返回自身包括padding，内容区域的宽度，不含边框返回值不带单位​​​

三、元素滚动scroll系列

• 可以动态的获得元素的大小，滚动距离
• scrollWidth&scrollHeight​​​​：返回自身实际的宽度，不含边框，返回值不带单位

⚠️页面被卷去的头部：如果浏览器的高或宽度不足以显示整个页面时，会自动出现滚动条。当滚动条件向下滚动时，页面上面被隐藏掉的高度，称之为页面被卷去的头部。滚动条在滚动时会出发onscroll事件。所以如何解决页面被卷去的头部？方法如下（页面被卷去的头部有兼容性问题，通常有以下几种写法）：

1. 声明了DTD，使用document.documentElement.scrollTop
2. 未声明DTD，使用document.body.scrollTop
3. 新方法：window.pageYOffset和window.pageXOffset,IE9开始支持

四、总结

1.三大系列作用的总结​​​​​​​

offsetWidth：返回自身包括padding，边框，内容区的宽度，返回值不带单位

clientWidth：返回自身包括padding，内容区域的宽度，不含边框返回值不带单位​​​

scrollWidth：返回自身实际的宽度，不含边框，返回值不带单位

2.三大系列的主要用法

• offset系列经常用于获得元素位置      offsetLeft&offsetTop​​​​​​
• client经常用于获取元素大小              clientWidth&clientHeight
• scroll经常用于获取滚动距离              scrollTop&scrollLeft
• 页面滚动的距离通过                           window.pageXOffset获得