三大家族(offset、scroll、client)

offset、scroll、client三大家族

offset家族

offsetWidth 与 offsetHeight

1. offset 偏移

2. 用于获取元素自身的位置和大小

3. offsetWidth和offsetHeight获取对象自身的的宽度/高度 offsetWidth = width + border + padding; offsetHeight = height + border + padding

4. offsetHeight 与 style.height 的区别

   • 得到的结果值不同

     • offsetHeight：获取元素的真实高度

     • style.height：只能获取行内样式style="height:100px;"，如果样式写到了其他地方(如style代码块)，甚至根本就没写，便无法获取

   • 获得的值的类型不同：

     • offsetHeight：数值类型

     • style.height：带单位的字符串

   • 使用方式的不同

     • offseHeight：只读属性, 只能获取属性值, 不能设置元素的高度

     • style.height：能获取、设置行内的height属性值

offsetParent(获取元素对象)

1. offsetParent: 获取最近的定位父元素 （元素自身定位参照的父元素）
2. 注意点
   • 如果元素自身是固定定位（fixed），则定位父级是null
   • 如果元素自身是非固定定位,并且所有的父元素都没有定位，那么他的定位父级是body
   • body的定位父级是null

offsetLeft 与 offsetTop

1. offsetLeft: 获取自己左外边框与offsetParent的左内边框的距离

2. offsetTop: 获取自己上外边框与offsetParent的上内边框的距离

scroll家族

scrollWidth 和 scrollHeight

1. scroll 滚动
2. scrollWidth 用与获取元素中内容的宽度,
3. scrollHeight 用于获取元素中内容的高度
4. 注意
   • 当元素中的内容宽度和高度小于元素的宽高时(即内容没有溢出元素时), 获取到的scrollWidth = width | scrollHeight = height
   • 当元素中的内容溢出时, scrollWidth = 内容宽 , scrollHeight = 内容高

scrollLeft 和 scrollTop

1. scrollTop 当元素自身的onscroll事件发生时，元素向上卷曲出去的距离

2. scrollLeft：当元素自身的onscroll事件发生时，元素向左卷曲出去的距离
   

client家族

clientWidth 和 clientHeight

1. clientWidth 元素可视区域的宽度 ,边框内部的宽度,不带边框
2. clientHeight 元素可视区域的高度 ,边框内部的高度,不带边框

clientLeft 和 clientTop

1. clientLeft 元素左边边框的宽度（如果左边有滚动条会包含滚动条的宽度）
2. clientTop 元素顶部边框的高度 （如果顶部有滚动条会包含滚动条的高度）