JS盒子模型

JS盒子模型指的是通过JS中提供的一些列属性和方法，获取页面中元素的样式等信息值
<div id="box"></div>
该元素的原型链：div#box.__proto__--HTMLDivElement.prototype.__proto__--HTMLElement.prototype.__proto__--Element.prototype.__proto__--Node.prototype.__proto__--EventTarget.prototype.__proto__--.Object.prototype
attributes：该元素当前属性集合
childNodes：所有子节点集合
children：所有元素子节点
classList：类名集合

1、client系列(当前元素的私有属性)
内容的宽高：就是我们设置的width和height，如果不设置宽高，容器的宽高就会根据里面的内容进行适应，这样获取的值就是真实的宽高，如果设置了宽高，不管内容是否有溢出，宽高就是我们设置的宽高。
真实内容的宽高和设置的宽高没有必然联系，就是指实例内容的宽高，加入内容有溢出，那么真实宽高是要加上溢出内容的
clientHeight/clientWidth：内容的高度/宽度+上下/左右padding(和内容溢出没有关系)
clientLeft/clientTop：左/上边框的宽度=borderLeftWidth/borderTopWidth
draggable：H5新特性，是否可拖拽
innerHTML：元素里面的内容（所有）
innerText：元素里面的字

2、offset系列
offsetHeight/offsetWidth：clientHeight/clientWidth+上下/左右border(和内容溢出没有关系)
offsetParent：当前元素的父级参照物
offsetLeft/offsetTop：当前元素的外边框距离父级参照物的内边框的左/上偏移量

3、scroll系列
scrollHeight/scrollWidth：容器内容没有溢出的情况下跟clientHeight/clientWidth一模一样；当有溢出时，该值是真实内容+上/左填充
获取到的结果都是近似值。原因：同一个浏览器是否设置overflow=hidden对于最终结果是有影响的；在不同的浏览器中获取到的结果也是不一样的。
scrollLeft/scrollTop： 滚动条卷去的高度/宽度(滚动条滚动过程中看不到的那部分宽高) 这两个属性是唯一可读写的属性 其他都是只读

JS盒子模型取值的问题：
通过这13个属性值都是整数，浏览器在获取结果的时候会在真实结果上四舍五入
操作浏览器本身的盒子模型信息：
clientHeight/clientWidth：都是当前浏览器可视窗口的高/宽（一屏幕的高/宽）
scrollHeight/scrollWidth：是当前页面的真实高/宽，即所有屏加起来的值（近似值）

想要兼容各种浏览器，不管是设置还是获取，都要写两套。
document.doumentElement[attr] || document.body[attr]，并且doumentElement要写在前面，他要是能获取到值就不用body获取的值了。
例如：
document.documentElement.clientWidth || document.body.clientWidth获取当前窗口的可视宽度
document.documentElement.scrollTop = 0; document.body.scrollTop = 0设置当前窗口向上卷去的高度

获取元素某一个具体的样式属性值
1、element.style.属性名：这种方式需要把元素的样式都写在行内样式上，否则只能获取到""空字符串
这种方式在真实项目中不常用，无法实现css跟html的分离
2、使用window.getComputedStyle(当前要操作的元素对象, 伪类)这个方法获取所有经过浏览器计算过的样式只要当前元素标签可以在页面中呈现处来，那么他的所有样式都是讲过浏览器计算（渲染）过的，即使有的样式没有写。一般不用伪类，传值null即可。
获取到的结果是CSSStyleDeclaration类的一个实例，该实例包含了当前元素所有的样式属性和值。IE6-8不兼容
在IE6-8下可以用元素.currenStyle来获取所有经过浏览器计算过的样式。

1、可以使用try...catch...处理，但存在两个问题：必须保证try中执行的代码在不兼容的浏览器中执行的时候报错，这样才可以实现，否则就走不到catch中；不管是什么浏览器，都需要先把try中的代码执行一遍，即使是在不兼容浏览器，这样的话就会在不兼容浏览器中执行两遍。

function getCss(curEle, attr) {
        var val = null;
        try {
            val =  window.getComputedStyle(curEle, null)[attr];
        }catch (e){
            val =  curEle.currentStyle[attr];
        }
        return val;
    }

2、先判断当前window下有没有这个属性，存在就兼容，不存在就不兼容(key in obj)， 多种写法

function getCss1(curEle, attr) {
        var val = null;
        // if(window.getComputedStyle) 
        // if(typeof window.getComputedStyle === 'undefined') 
        if('getComputedStyle' in window){
            val = window.getComputedStyle(curEle, null)[attr];
        } else {
            val =  curEle.currentStyle[attr];
        }
        return val;
    }

3、因为我们确定只在IE6-8下不兼容，所以可以通过检测浏览器的版本类型来处理兼容
window.navigator.userAgent属性中包含了浏览器的信息，MSIE X.0就表示了IE浏览器的版本

function getCss2(curEle, attr) {
        var val = null;
        if(/MISE (6|7|8)]/.test(navigator.userAgent)){
            val = curEle.currentStyle[attr];
        }else {
            val = window.getComputedStyle(curEle, null)[attr];
        }
        return val;
}

最常用的是第二种方法，对于部分样式属性，不同的浏览器获取的结果不一样，主要是由于getComputedStyle和currentStyle在某些方面不一样。但是字体大小字体等是可以自己设置成一样的。因此在写CSS样式之前要先初始化一部分默认样式，避免浏览器之间的差异，对后面JS获取结果的统一也是有帮助的。