js之盒子模型的详解

1.js盒子模型

指的是通过js中提供的一系列的属性和方法，获取页面中元素的样式信息值

例：

#box有很多自己的私有属性：

HTMLDivElement.prototype->HTMLElement.prototype->Element.prototype->Node.prototype->EventTarget.prototype->Object.prototype
var box = document.getElementById("box");
console.dir(box);

　一提到盒子模型，大家首先会想到的是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之盒子模型的详解的详细内容，更多请关注Gxl网其它相关文章！