JS盒子模型

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;

}

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;

}