Web前端开发学习笔记11-- offset、client、scroll系列

1、元素偏移量 offset 系列

• offset 概述

offset 是元素偏移量，使用 offset 系列相关属性可以动态的得到该元素的位置（偏移）、大小等

1. 获得元素距离带有定位度元素的位置
2. 获得元素自身的大小（宽度高度）
3. 返回的数值不带单位

• offset 系列常用属性

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

• offset 和 style 的区别

offset	style
可以得到任意样式表中的样式值	只能得到行内样式表中的样式值
获得的数值没有单位	获得的数值是带有单位的字符串
offsetWidth 包含 padding、border 和 width	style.width 获得不包括 padding 和 border 的值
offsetWidth 等属性只是只读属性，只能获取不能赋值	style.width 是可读写属性，可以获取也可以赋值
适合获取元素大小、位置	适合给元素更改值