javascript三大家族：offset属性 scroll属性 client属性

Posted 2020-11-23 tanguoyu

(1)offset属性：
1.1 offsetWidth = width + border + padding
1.2 offsetHeight = height + border + padding
1.3 offsetTop = 元素相对于浏览器顶部的距离
1.4 offsetLeft = 元素相对于浏览器左边的距离
功能：只读（获取）不写（设置）
1.5 子元素的offsetTop和offsetLeft：
关键看父元素是否设置了定位，若有则相对于父元素的上边框和左边框的距离；
若没有则相对于浏览器顶部和左边的距离。
1.6 offsetParent:嵌套关系的标签，默认选中的是body，若父元素添加了定位，则选中的是父元素。
如big标签下是small标签，var ele = small.offsetParent;console.log(ele)

(2)scroll属性：
2.1 scrollWidth = width + padding-left + padding-right
2.2 scrollHeight = height + padding-top + padding-bottom
2.3 scrollTop = 滚动条滚动之后相对于浏览器顶部的距离
2.4 scrollLeft = 滚动条滚动之后相对于浏览器左边的距离
2.5 根元素引用scrollTop属性：document.documentElement = 根节点
2.6 获取页面超出浏览器顶部的大小：
var top = document.documentElement.scrollTop（有声明文档类型） || document.body.scrollTop（没有声明文档类型）;（兼容写法）

(3)client属性：
3.1 clientWidth: width + padding (不包含边框)
3.2 clientHeight: height + padding (不包含边框)
3.3 clientTop: border-top (获取当前元素上边框的大小)
3.4 clientLeft: border-left (获取当前元素左边框的大小)