三大家族
offset
1.作用
获取元素 自身 真实的宽高与位置
2.语法
offsetWidth/offsetHeight
获取元素真实的宽高 (width+padding+border)
offsetParent
获取元素最近的定位父级
a. 元素是固定定位fixed,定位父级是null
b 元素是非固定定位(绝对与相对),所有的父元素都没有定位,定位父级是body
c. body的定位父级是null
offsetLeft/offsetTop
获取元素真实的位置 : 元素 左/上 外边框 到 定位父级 左/上内边框的距离
scroll
1.作用
获取元素 内容 的宽高与位置
2.语法
scrollWidth/scrollHeight
获取元素 内容的 宽高
scrollLeft/scrollTop
获取元素 内容的 位置 : 左/上 滚动的距离
3.应用场景
固定导航
a. 给页面注册滚动条事件 : window.onscroll
b。 获取页面滚动的距离 : document.documentElement.scrollLeft / Top
client
1.作用
获取元素 可视区域 的宽高与位置
2.语法
clientWidth/clientHeight
获取元素 可视区域的 宽高
clientLeft/clientTop
获取元素 左/上边框宽度 : border-left 与 border-top
3.应用场景
响应式布局
a. 给页面注册大小变化事件 : window.onresize
b。 获取页面可视区域大小 : document.documentElement.clientWidth / Height
三大家族特点
a. 可以获取行内,也可以获取行外
b. 获取的类型是number,不带单位
c. 只能获取,不能设置``