1.js盒子模型
指的是通过js中提供的一系列的属性和方法，获取页面中元素的样式信息值
例：
#box有很多自己的私有属性：
<strong>HTMLDivElement.prototype->HTMLElement.prototype->Element.prototype->Node.prototype->EventTarget.prototype->Object.prototype<br/>var box = document.getElementById("box");<br/>console.dir(box);</strong> 一提到盒子模型，大家首先会想到的是css的盒子模型，那么JS盒子模型指的是通过JS中提供的一系列的属性和方法，获取页面中的元素的样式信息值。
对于一个#div(有很多自己的私有的属性) -> HTMLDivElement.prototype->HTMLElement.prototype->Element.prototype->Node.prototype->EventTarget.prototype->Object.prototype
下面是一些JS方法
1、client系列(当前元素的几个私有的属性)
内容的宽度和高度:我们设置的width/height这两个样式就是内容的宽和高，如果没有设置height值，容器的高度会根据里面的内容自己进行适应，这样获取的值就是真实内容的高；如果设置固定了高度了，不管内容是多了还是少了，其实我们内容的高度指的都是设定的那个值。
真实内容的宽度和高度:这个代指的是实际内容的宽高（和我们设置的height没有必然的联系），例如我设置高度为200px，如果内容有溢出，那么真实内容的高度就是要把溢出的内容高度加进来的
clientWidth/clientHeight 内容的宽度/高度 + 左右/上下 填充（和内容溢出没有关系）
clientLeft:左边框的宽度 clientTop:上边框的高度 （border[Left/Top]Width）
2、offset系列
offsetWidth/offsetHeight：clientWidth/clientHeight+左右/上下边框（和内容是否溢出也是没有任何的关系的）
offsetParent:当前元素的父级参照物
offsetLeft/offsetTop：当前元素的外边框距离父级参照物的内边框的偏移量
3、scroll系列
scrollWidth/scrollHeight:和我们的clientWidth/clientHeight一模一样（前提是:容器中的内容没有溢出的情况下） 如果容器中的内容有溢出，我们获取的结果如下规则
scrollWidth：真实内容的宽度（包含溢出）+左填充
scrollHeigh：真实内容的高度（包含溢出）+上填充
获取到的结果都是约等于的值，因为：同一个浏览器，我们是否设置overflow=“hidden”对于最终的结果是有影响的；在不同的浏览器下取到的结果也是不同的。
scrollLeft/scrollTop:滚动条卷去的宽度和高度
二、关于JS盒子模型属性取值的问题
我们通过这13个属性值获取到的结果永远不可能出现小数，都是整数，浏览器在获取结果的时候，还在原来真是结果的基础上进行四舍五入；
三、关于操作浏览器本身的盒子模型信息
clientWidth/clientHeight 是当前浏览器可视窗口的宽度和高度（一屏幕的宽度和高度）
scrollWidth/scrollHeight 是当前页面的真实的宽度和高度（所有屏加起来的宽度和高度~但是是一个约等于的值）
我们不管哪些属性，也不管是什么浏览器，也不管是获取还是设置，想要都兼容的话，需要写两套
document.documentElement[attr] || document.body[attr];
必须document.documentElement在前
例如document.documentElement.clientWidth || document.body.clientWidth
设置也需要写两套
编写一个有关于操作浏览器盒子模型的方法 ，代码如下
//如果只传递了attr没有传递value，默认的意思是获取样式值。如果都传递了，意思是设置//不严谨的来说这就是有关于“类的重载”:同一个方法，通过传递的参数的不同实现了不同的功能function win(attr,value){if(typeof value === "undefined"){//属于获取操作return document.documentElement[attr] || document.body[attr];
}//设置document.documentElement[attr] = value;
document.body[attr] = value
}
以上是js之盒子模型的详解的详细内容。更多信息请关注PHP中文网其他相关文章！
