JS中的盒子模型提供的一些列的属性和方法，获取页面中的
内容的宽度和高度：我们设置的width/height这两个样式就是内容的宽和高,如果没有设置height值，容器的高度会根据里面内容自己进行适应，这样获取的值就是真实内容的高;如果设置固定的高度了，不管内容是多了还是少了，其实我们的内容的高度值的都是设定的那个值;
真实内容的宽度和高度:这个代指的是实际内容的宽高(和我们设置的height没有必然的联系)，例如:我设置高度为200px，如果内容有溢出，那么真是内容的高度是要把溢出内容的高度也要加进来的
1.client系列(当前元素的几个私有的属性)
clientWidth/clientHeight:内容的宽度/高度+左右/上下填充
（和内容溢出没有关系）
clientLeft:左边框的宽度clientTop：上边框的高度
(border[Left/Top]Width)
2.offset系列
//->offsetWidth/offsetHeight:clientWidth/clientHeight+左右/上下边框(和内容是否溢出也是没有任何的关系的)
//->offsetParent:当前元素的父级参照物
//->offsetLeft/offsetTop:当前元素的外边框距离父级参照物的内边框的偏移量
3.scroll系列
//->scrollWidth/scrollHeight：和我们的clientWidth/clientHeight一模一样(前提是:容器中的内容没有溢出的情况下)
//如果容器中的内容有溢出,我们获取的结果是如下规则:
scrollWidth：真实内容的宽度(包含溢出)+左填充
scrollHeight：真实内容的高度(包含溢出)+上填充
获取到的结果都是约等于的值，因为：同一个浏览器，我们是否设置overflow='hidden'对于最终结果是有影响的;在不同的浏览器中我们获取到的结果也是不同；
scrollLeft/scrollTop:滚动条卷去的宽度/高度
2、关于JS盒子模型属性取值的问题
我们通过这个13个属性值获取的结果永远不可能出现小数，都是整数；浏览器在获取结果的时候，还在原来真实结果的基础上进行四舍五入;
3、关于操作浏览器本身的盒子模型信息
clientWidth/clientHeight是当前浏览器可视窗口的（一屏幕的宽度和高度）宽度和高度
scrollWidth/scrollHeight是当前页面的真实宽度和高度(所有屏加起来的宽度和高度但是是一个约等于的值)
我们不管哪些属性，也不管是什么浏览器，也不管是获取还是设置，想要都兼容的话，需要些两套
document.documentElement[attr]||document.body[attr];
必须document.documentElement在前
document.documentElement.clientWidth||document.body.clientWidth
document.documentElement.scrollTop=0;
document.body.scrollTop=0;
//编写一个有关操作浏览器盒子模型的方法 //如果只传递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; } console.log(win("clientHeight")); win("scrollTop",0);
·····························································································································
1、元素.style.属性名
需要我们把元素的样式都写在行内样式上才可以（写在样式表中是不管用的）
console.log(box.style.height);
console.log(box.style.width)
在真实项目中，这种方式不常用，因为我不能为了获取值而把所有的央视都写在行内（无法实现css和html的分离）
2、使用window.getComputedStyle这个方法获取所有经过浏览器计算过的样式
所有经过浏览器计算过的样式:只要当前的元素标签可以在页面中呈现出来，那么它的所有央视都是经过浏览器计算过的（渲染过的）
哪怕有些样式你没有写,我们也可以获取到
console.log(window.getComputedStyle);
获取的结果是CSSStyleDeclaration这个类的一个实例:包含了当前元素的所有样式属性和值
console.log(window.getComputedStyle(box,null));
3、方法虽然好用，但是在IE6-8下是不兼容的:因为window下没有getComputedStyle这个属性
在IE6-8下执行这个方法会报错
在IE6-8下我们可以使用currentStyle来获取所有经过浏览器计算过的样式
console.dir(box.currentStyle);
// window.getComputedStye(box,null).height
box.currentStyle.height
// getCss:获取当前元素所有经过浏览器计算过的样式中的[attr]对应的值
// curEle:[object]当前要操作的元素对象
//attr:[string]我们要获取的样式属性的名称
1、使用try、catch来处理兼容
//前提:必须保证try中代码在不兼容浏览器中执行的时候报错，这样的话我们才可以用catch捕获到异常的信息，进行其它的处理
//不管当前是什么浏览器，都需要先把try中的代码执行一遍，如果当前是ie7，window.getComputedStyle本身是不兼容的但是
//我也要先执行一遍，报错了,在把curEle.currentStyle执行一遍(消耗性能)
function getCss(curEle,attr){，
var val = null;
try{
val = window.getComputedStyle(curEle,null)[attr];
}catch(e){
val = curEle.currentStyle[attr];
}
return val;
}
2.判断当前浏览器中是否存在这个属性或者方法，存在就兼容，不存在就不兼容
function getCss(curEle,attr){ // 性能略好
var val = null;
if("getComputedStyle" in window){// 如果返回的是true,说明window下
//有getComptedStyle这个属性 代表兼容
val = window.getComputedStyle(curEle,null)[attr];
}else{
// 不兼容
val = curEle.currentStyle[attr];
}
return val;
}
3.
function getCss(){// 性能不如上面
var val = null;
if(window.getComputedStyle){
val = window.getComputedStyle(curEle,null)[attr];
}else{
val = curEle.currentStyle[attr];
}
}
//通过检测浏览器版本和类型来处理兼容
window.navigator.userAgent
// Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.63 Safari/537.36
function getCss(curEle,attr){
var val = null;
if(/MSIE(6|7|8)/.test(navigator.userAgent)){
val = curEle.currentStyle[attr];
}else{
val = window.getComputedStyle(curEle,null)[attr];
}
return val;
}
//
function getCss(curEle,attr){
var val = null, reg = null;
if("getComputedStyle" in window){
val = window.getComputedStyle(curEle,null)[attr];
}else{
if(attr==="opacity"){
val = curEle.currentStyle["filter"];
reg = /^alpha(opacity=(d+(?:.d+)?))$/i/;
val = reg.test(val)?reg.exec(val)[1]/100:1;
// "alpha(opacity=10)" 把获取到的结果进行剖析，获取里面的数字，让数字乘以100才和标准的浏览器保持了一致
}else{
val = curEle.currentStyle[attr];
}
}
reg = /^(-?d+(.d+)?)(px|pt|rem|em)?$/i;
return reg.test(val)?parseFloat(val):val;
}