JS盒子模型常用属性

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

client系列/offset系列/scrollWidth/scrollHeight都是“只读”属性：只能通过属性获取值，不能通过属性修改元素的样式

1、client系列(当前元素的几个私有属性）

clientWidth/clientHeight：内容的宽度/高度+左右/上下填充padding（和内容溢出无关）

clientLeft：左边框的宽度
clientTop：上边框的高度 （border [left/top] Width）

2、offset系列

offsetWidth/offsetHeight：clientWidth/clientHeight+左右/上下边框border（和内容溢出也没有任何关系）

offsetParent：当前元素的父级参照物。在同一个平面中，最外层的元素是里面所有元素的父级参照物（和HTML层级结构没有必然的联系）。一般来说一个页面中所有元素的父级参照物都是body。
想要改变父级参照物：需要通过position定位来进行改变：absolute、relative、fixed任意一个值都可以把父级参照物进行修改

offsetLeft/offsetTop：当前元素的外边框距离父级参照物的内边框的偏移量

image.png

//函数offset:实现获取页面中任意一个元素，距离body的偏移（包含左偏移和上偏移），不管当前父级参照物是谁。等同于jQuery中的offset方法
//获取的结果是一个对象{left：距离body的左偏移，top：距离body的上偏移}

function offset(curEle){
    var left=null,top=null,par=curEle.offsetParent;
    //先把自己本身的进行累加
    left+=curEle.offsetLeft;
    top+=curEle.offsetTop;

    //只要没有找到body，就把父级参照物的边框和偏移也进行累加
    while(par){
       //累加父级参照物本身的边框
       left+=par.clientLeft;
       top+=par.clientTop;

       //累加父级参照物本身的偏移
       left+=par.offsetLeft;
       top+=par.offsetTop;

       par=par.offsetParent;
    }
    return {left:left,top:top};
}

3、scroll系列

scrollWidth/scrollHeight：和clientWidth/clientHeight一模一样（前提是：容器中的内容没有溢出的情况下）。

如果容器中的内容有溢出，获取的结果是如下规则：

scrollWidth:真实内容的宽度（包含溢出）+左填充
scrollHeight:真实内容的高度（包含溢出）+上填充
获取到的结果都是约等于的值，因为：同一个浏览器，是否设置overflow=“hidden”对于最终的结果是有影响的；在不同的浏览器中我们获取到的结果也是不相同的

scrollLeft/scrollTop：滚动条卷去的宽度/高度（这两个属性是唯一“可读写”属性）

scrollTop存在边界值（最小值和最大值），自己设置的值超过边界值都没用，起到效果的依然是边界值。最小值：是零，直接回到容器顶部，没有超出。最大值：真实的高度-当前容器一屏幕的高度（div.scrollHeight - div.clientHeight）
————————————————————————————————

关于JS盒子模型属性取值的问题

通过以上13个属性值获取的结果永远不可能出现小数，都是整数；浏览器获取结果的时候，在原来真实结果的基础上进行四舍五入

关于操作浏览器本身的盒子模型信息

clientWidth/clientHeight是当前浏览器可视窗口的宽度和高度（一屏幕的宽度和高度）

scrollWidth/scrollHeight是当前页面的真实宽度和高度（所有屏加起来的宽度和高度，但是是一个约等于的值）

不管哪些属性，也不管是什么浏览器，也不管是获取还是设置，想要都兼容的话，需要写两套：
document.documentElement [attr] || document.body. [attr]; (必须document.documentElement 在前)
————————————————————————————————

编写一个有关于操作浏览器盒子模型的方法

如果只传递了attr没有传递value，默认意思是“获取”；如果两个参数都传递了，意思是“设置”。（不严谨的说这是有关于“类的重载”：同一个方法，通过传递参数不同实现了不同的功能）

function win(attr,value){
    if(typeof value==="undefined"){  //没有传递value值，即获取
        return document.documentElement[attr] || document.body[attr];
    }
    //--->“设置”
    document.documentElement[attr]=value;
    document.body[attr]=value;
}