# 元素偏移量 offset
offset 翻译过来就是偏移量,我们使用 offset 系列相关属性可以动态的得到该元素的位置 (偏移), 大小等
- 获得元素距离带有定位父元素的位置
- 获得元素自身的大小 (宽度高度)
- 注意:返回的数值都不带单位
| offset 系列属性 | 作用 |
|---|---|
| element.offsetParent | 返回作为该元素带有定位的父级元素 如果父级都没有定位则返回 body |
| element.offsetTop | 返回元素相对于带有定位父元素上方的偏移 |
| element.offsetLeft | 返回元素相对带有定位父元素左边框的偏移 |
| element.offsetWidth | 返回自身包括 padding, 边框,内容区的宽度,返回数值不带单位 |
| element.offsetHeight | 返回自身包括 padding, 边框,内容区的高度,返回数值不带单位 |
# offset 与 style 的区别
- offset
- offset 可以得到任意样式表中的样式值
- offset 系列获得的数值是没有单位的
- offsetWidth 包含 padding+border+width
- offsetWidth 等属性是制度属性,只能获取不能赋值
- 所以如果只想获取元素大小位置,用 offset 更合适
- style
- style 只能得到行内样式表中的样式值
- style.width 获得的是带有单位的字符串
- style.width 获得不包含 padding 和 border 的值
- style.width 是可读写属性,可以获取也可以赋值
- 所以如果想要给元素更改值,则需要用 style 改变
