offset、client 和 scroll三大系列的属性及其作用

1. 元素偏移量 offset 系列

1.1 offset 概述

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

• 获得元素距离带有定位父元素的位置
• 获得元素自身的大小(宽度高度)
• 注意：返回的值都不带单位。

offset系列常用属性

• element.offsetParent：返回作为该元素带有定位的父级元素，如果父级都没有定位则返回body
• element.offsetTop：返回元素相对带有定位父元素上方的偏移
• element.offsetLeft：返回元素相对带有定位父元素左边框的偏移
• element.offsetWidth：返回自身包含的宽度，无单位
• element.offsetHeight：返回自身包含高度，无单位
  

1.2 offset 与 style区别

offset

• offset 可以得到任意样式表中的样式值

• offset系列获得的数值是没有单位的

• offsetWidth包含padding+border+width

• offsetWifdth等属性是只读属性，只能获取不能赋值

  所以，想要获取元素大小位置，用offset更合适

style

• style只能得到行内样式表中的样式值

• style.width获得的是带有单位的字符串

  扫描二维码关注公众号，回复： 12164310 查看本文章

• style.width获得不包含padding和border的值

• style.width是可读写属性，可以获取也可以赋值

  所以，想要给元素更改值，则需要用style改变。

2.元素可视区 client 系列

使用client系列的相关属性来获取元素可视区的相关信息。可以动态的得到该元素的边框大小、元素大小等。

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

3.元素滚动 scroll 系列

3.1 元素 scroll系列属性

• element.scrollTop：被卷去的上侧距离，返回数值不带单位
• element.scrollLeft：被卷去的左侧距离，返回数值不带单位
• element.scrollWidth：返回自身实际的宽度，不含边框，返回数值不带单位
• element.scrollHeight：返回自身实际的高度，不含边框，返回数值不带单位

3.2 页面被卷去的头部

如果浏览器的高(宽)度不足以显示整个页面时，就会自动出现滚动条。当滚动条向下滚动的时候，页面上面被隐藏掉的高度，称为页面被卷去的头部。滚动条在滚动时会触发onscroll事件

三大系列总结

• offsetWidth 与另外两者（ clientWidth和 scrollWidth）的区别是： offsetWidth包含边框
• clientWidth 和 scrollWidth 的区别：内容超出可视区（即出现滚动条的时候）clientWidth返回的是可视区的大小，scrollWidth返回的是实际内容的大小。

他们主要用法：

1. offset系列经常用于获得元素位置 offsetLeft offsetTop
2. client经常用于获取元素大小 clientWidth clientHeight
3. scroll 经常用于获取滚动距离 scrollTop scrollLeft
4. 页面的滚动距离通过window.pageYOffset 获得