本文已参与『新人创作礼』活动，一起开启掘金创作之路
持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第6天，点击查看活动详情
js的盒子模型一个有四大系列共有13个
1.client 系列
- clientWidth
- clientHeight
- clientTop
- clientLeft
1.1client详解
获取当前盒子可视窗口的宽高
clientWidth:当前盒子可视区域的宽度( Width +左右的 padding )
clientHeight:当前盒子可视区域的高度( Height +左右的 padding )
获取当前盒子的左、上边框的高度
clientLeft:当前盒子的左边框的宽度(左 border )
clientTop :当前盒子左边框的宽度(上 border )
获取的值都是Number类型的如果获取的值是小数,那么他会给你向上取整为整数,内容是否溢出对其没有影响
获取当前浏览器可视区域的宽高
let winH = document.documentElement.clientHeight || document.body.clientHeight;
let winW = document.documentElement.clientWidth || document.body.clientWidth;
1.offset 系列
- offseWidth
- offsetHeight
- offsteLeft
- offsetTop
- offsetParent
1.1offset详解
获取当前盒子的总宽高度
offsetWidth:获取当前盒子的总宽度(盒子的宽度 + border 宽)
offsetHeight:获取当前盒子的总高度(盒子的高度 + border 高)
获取当前盒子的偏移量
offsetLeft:当前盒子距离父级参照物的左偏移量( 当前盒子的外边框距离父级参照物的内边框距离 )
offsetTop:当前盒子距离父级参照物的上偏移量( 当前盒子的外边框距离父级参照物的内边框距离 )
offsetParent:当前盒子的父级参照物
当前盒子的父级参照物，要取决于当前盒子的所有的父元素中，从里外一层一层查找,看看谁有 position定位,谁就是它的父级参照物。
小知识
boby的父级参照物是
null
scroll 系列
- scrollTop
- scrollLeft
- crollWidth
- scrollHeight
scroll 详解
scrollHeight : 获取当前元素的真实的高度( 如果当前盒子的内容没有溢出那就和clientHeight相等)，如果溢出了那就等于上padding + 内容的真实高度【如果当前盒子设置了overflow：hidden那scrollHeight就等于上下padding + 溢出内容的真实高度】
scrollWidth : 获取当前元素的真实的宽度(如果当前盒子的内容没有溢出那就呵呵clientWidth相等)，如果溢出了那就等于左padding+内容的真实宽度【如果当前盒子设置了overflow：hidden那scrollWidth就等于左右padding+溢出】
scrollLeft : 获取和设置当前盒子横向滚动条卷曲的宽度
scrollTop：获取和设置当前盒子纵向滚动条
思考题
封装一个获取盒子临界
// 图片的下边框 === 当前浏览器可视区域的下边框
// 图片的总高度 + 图片距离body顶部的上偏移量 === 浏览器滚动条卷曲的高度 + 浏览器可视区域的高度
function offset(ele){
...
}
let res = offset(box)
文章有错误或者遗漏地方的小伙伴可以在评论区评论哦~~
