js中的盒子模型

Posted 2020-10-09 CSS is awesome

说到盒子模型，你第一时间会想到css盒子模型，css中的盒子模型包括（内容区+内边距+边框）。那在js中怎么去获取这些属性值呢？下面一起来学习js中的盒子模型。

css样式

body {
    margin: 0;
    padding: 0;
}

.box {
    position: absolute;
    margin: 10px;
    padding: 10px;
    width: 100px;
    height: 100px;
    border: 10px solid #000;
    line-height: 25px;
}

html结构

<div class="box" id="box">
    前端学习之路之JS盒子模型 前端学习之路之JS盒子模型 前端学习之路之JS盒子模型 前端学习之路之JS盒子模型
</div>

1.client系列

clientWidth/clientHeight  如果不设置容器的宽高，用内边距撑开，获取的是内容的实际宽高加上内边距。如果设置宽高，则高度就是设置的宽高加上内边距。

clientLeft/clientTop  边框的宽度

1 var box=document.getElementById("box");
2 console.log(box.clientWidth); //120
3 console.log(box.clientHeight); //120
4 console.log(box.clientLeft); //10
5 console.log(box.clientTop); //10

2.offset系列

offsetWidth/offsetHeight (clientWidth+clientLeft*2),(clientHeight+clientTop*2)

offsetLeft/offsetTop 相对父级盒子的外边距

offsetParent 盒子的父级盒子

1 console.log(box.offsetWidth); //140
2 console.log(box.offsetHeight); //140
3 console.log(box.offsetLeft); //10
4 console.log(box.offsetTop); //10
5 console.log(box.offsetParent); //body

3.scroll系列

scrollWidth/scrollHeight 如果内容没有溢出，值和clientWidth/clientHeight一样。如果内容溢出：

scrollWidth：实际溢出内容宽度+左填充

scrollHeight：实际溢出内容高度+上填充

scrollTop: 滚动条卷去的高度

scrollLeft: 滚动条卷去的宽度

1 console.log(box.scrollWidth); //120
2 console.log(box.scrollHeight); //120
3 console.log(box.scrollTop);  //0
4 console.log(box.scrollLeft); //0

获取，设置浏览器盒子模型信息兼容写法

document.documentElement.clientWidth||document.body.clientWidth

封装一个函数获取设置盒子模型

1 function win(attr, value) {
2     if(typeof value === "undefined") {
3         return document.documentElement[attr] || document.body[attr];
4     }
5     document.documentElement[attr] = value;
6     document.body[attr] = value;
7 }

这就是js中的盒子模型，在开发中常常会用到，而且这几个属性很容易记混淆，要经常练习，才能熟练掌握，明天就是中秋节了，在这里预祝大家中秋节快乐！！！

<div class="box" id="box">前端学习之路之JS盒子模型 前端学习之路之JS盒子模型 前端学习之路之JS盒子模型 前端学习之路之JS盒子模型</div>