三大家族(offset、scroll、client)
offset、scroll、client三大家族
offset家族
offsetWidth 与 offsetHeight
-
offset 偏移
-
用于获取元素自身的位置和大小
-
offsetWidth和offsetHeight获取对象自身的的宽度/高度
offsetWidth = width + border + padding; offsetHeight = height + border + padding
-
offsetHeight 与 style.height 的区别
-
得到的结果值不同
-
offsetHeight:获取元素的真实高度
-
style.height:只能获取行内样式
style="height:100px;"
,如果样式写到了其他地方(如style代码块),甚至根本就没写,便无法获取
-
-
获得的值的类型不同:
-
offsetHeight:数值类型
-
style.height:带单位的字符串
-
-
使用方式的不同
-
offseHeight:只读属性, 只能获取属性值, 不能设置元素的高度
-
style.height:能获取、设置行内的height属性值
-
-
offsetParent(获取元素对象)
- offsetParent: 获取最近的定位父元素 (元素自身定位参照的父元素)
- 注意点
- 如果元素自身是固定定位(fixed),则定位父级是null
- 如果元素自身是非固定定位,并且所有的父元素都没有定位,那么他的定位父级是body
- body的定位父级是null
offsetLeft 与 offsetTop
-
offsetLeft: 获取自己左外边框与offsetParent的左内边框的距离
-
offsetTop: 获取自己上外边框与offsetParent的上内边框的距离
scroll家族
scrollWidth 和 scrollHeight
- scroll 滚动
- scrollWidth 用与获取元素中内容的宽度,
- scrollHeight 用于获取元素中内容的高度
- 注意
- 当元素中的内容宽度和高度小于元素的宽高时(即内容没有溢出元素时), 获取到的scrollWidth = width | scrollHeight = height
- 当元素中的内容溢出时, scrollWidth = 内容宽 , scrollHeight = 内容高
scrollLeft 和 scrollTop
-
scrollTop 当元素自身的onscroll事件发生时,元素向上卷曲出去的距离
-
scrollLeft:当元素自身的onscroll事件发生时,元素向左卷曲出去的距离
client家族
clientWidth 和 clientHeight
- clientWidth 元素可视区域的宽度 ,边框内部的宽度,不带边框
- clientHeight 元素可视区域的高度 ,边框内部的高度,不带边框
clientLeft 和 clientTop
- clientLeft 元素左边边框的宽度(如果左边有滚动条会包含滚动条的宽度)
- clientTop 元素顶部边框的高度 (如果顶部有滚动条会包含滚动条的高度)