说到盒子模型，你第一时间会想到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); //1203 console.log(box.clientHeight); //1204 console.log(box.clientLeft); //105 console.log(box.clientTop); //102.offset系列
offsetWidth/offsetHeight (clientWidth+clientLeft*2),(clientHeight+clientTop*2)
offsetLeft/offsetTop 相对父级盒子的外边距
offsetParent 盒子的父级盒子
1 console.log(box.offsetWidth); //1402 console.log(box.offsetHeight); //1403 console.log(box.offsetLeft); //104 console.log(box.offsetTop); //105 console.log(box.offsetParent); //body
3.scroll系列
scrollWidth/scrollHeight 如果内容没有溢出，值和clientWidth/clientHeight一样。如果内容溢出：
scrollWidth：实际溢出内容宽度+左填充
scrollHeight：实际溢出内容高度+上填充
scrollTop: 滚动条卷去的高度
scrollLeft: 滚动条卷去的宽度
1 console.log(box.scrollWidth); //1202 console.log(box.scrollHeight); //1203 console.log(box.scrollTop); ?//04 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>
js中的盒子模型
原文地址：http://www.cnblogs.com/zt123123/p/7624321.html