js 盒子模型与盒子偏移量

js 盒子模型：

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

　　一、client系类—》只读属性不可设置 (当前元素的私有属性，和内容溢出没关系，如果给容器设置了高度，就采用设置的高度，如果没设置，就采用自适应之后的高度)

　　　　（1）clientHeight / cilentWidth  内容的高度/宽度 加上 上下/左右填充值。

　　　　　　clientHeight  = height + padding-top + padding-bottom

　　　　　　clientWidth  = width + padding-left + padding-right

　　　　（2）clientLeft / clientTop 左/右边框的宽度

　　　　　　clientLeft = borderLeftWidth；

　　　　　　clientTop = borderTopHeight；

　　二、offset系类 只读属性不可设置 (当前元素的私有属性，和内容溢出没关系，如果给容器设置了高度，就采用设置的高度，如果没设置，就采用自适应之后的高度)　　

　　　　（1）offsetHeight/offsetWidth    内容的高度/宽度 加上 上下/左右填充值  加上上下/左右边框。

　　　　　　offsetHeigh = clientHeight + 2clientTop；

　　　　　　offsetWidth = clientWidth + 2clientLeft；

　　　　（2）offsetParent  当前元素的父级参照物，在同一个平面中最外层的元素是它里面所有元素的父级参照物，一般来说body是所有元素的父级参照物，但是当脱离文档结构时父级参照物发生改变即通过position定位来实现

　　　　　　　　position:absolute; position:relative;position:fixed 都可以改变父级参照物

　　　　（3）offsetLeft/offsetTop   当前元素的外边框距离基于父级参照物内边框的偏移量

　　三、scroll系列

　　　　（1）scrollHeight/scrollWidth 只读属性不可设置

　　　　　　  当容器内容没有溢出的时候和clientHeight/clientWidth 获取的值是一模一样的；

　　　　　　  当容器内容有溢出的时候，获取的规则如下：

　　　　　　  scrollWidth 真实内容宽度加上左填充

　　　　　　  scrollTop  真实内容高度加上上填充

　　　　　　  他们获取到的结果都是约等于的值，因为对于同一个浏览器设置overflow:hidden和不设置是有区别的，对于不同的浏览器获取到的值也是不同

　　　　（2）scrollLeft/scrollTop 既可读取也可以设置  滚动条卷去的宽度和高度

　　四、关于js盒子模型取值问题：通过这13个属性获取的值不可能出现小数，因为浏览器自动回进行四舍五入。

　　五、对于浏览器本身的盒子模型信息

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

　　　　scrollWidth/scrollHeight  当前页面的真实内容的宽和高（所有屏幕的宽和高即整个页面的高）是一个约等于的值；为兼容通过以下方式进行获取或者设置   document.documentElement[attr] || document.body[attr]

　　　　（1）获取浏览器的可视区域的宽或者高（一屏幕的宽或者高）

　　　　　　document.docementElement.clientWidth || document.body.clientWidth

　　　　　　document.docementElement.clientHeight || document.body.clientHeight

　　　　（2）设置浏览器滚动条卷去的高

　　　　　　document.documentElement.scrollTop= 0;

　　　　　　document.body.scrollTop = 0;

　　六、获取页面元素中的某一个具体的样式属性值

　　　　（1）元素.style.属性名  // box.style.height

　　　　　　弊端：只能获取定义了的行内样式的属性值，不能获取样式变中定义的样式属性值（无法实现css和html的分离）；

　　　　（2）window.getComputedStyle这个方法获取浏览器计算过得所有的样式，没有定义的样式也能获取到；

　　　　　　window.getComputedStyle(当前要操作的元素对象，当前元素的伪类【一般不写伪类写null】)   获取的结果是CSSStyleDeclaration 这个类的一个实例：包含了当前元素的所有样式集合。

　　　　　　window.getComputedStyle(box,null)["height"];

　　　　　　弊端：在IE6-IE8不兼容，但是在IE6-IE8下使用currentStyle来获取浏览器计算过得所有的样式；

　　　　　　元素.currentStyle     box.currentStyle.height

　　　　　　处理兼容：

　　　　　　（1）使用try...catch 处理兼容　　　

/*
　　　　　　　　　　功能：获取当前浏览器计算过得所有的样式对应的attr对应的值
　　　　　　　　　　参数：curEle 当前要操作的元素对象，attr字符串类型的值，我们要获取的当前元素的属性名
　　　　　　　　　　返回值：返回获取到当前元素的attr属性的值

　　　　　　　　*/

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

　　　　　　　　　　    curAttrVal = curEle.currentStyle[attr];
　　　　　　　　　　}

　　　　　　　　　　return curAttrVal;

　　　　　　　　}

　　　　　　　弊端：

　　　　　　　　1、必须保证try中的代码在低版本浏览器中报错，否则catch中的语句不会执行

　　　　　　　　2、不管是什么浏览器，try中的语句都会先执行一遍，比较消耗性能

　　　　　　（2）检测当前浏览器中是否存在当前的属性或者方法，存在即兼容

　　　　　　getCss:function(curEle,attr)

　　　　　　{
　　　　　　　　var curAttrVal = null;

　　　　　　　　if("getCumputedStyle" in window){

　　　　　　　　　　curAttrVal = window.getComputedStyle(curEle,null)[attr];

　　　　　　　　}

　　　　　　　　else{

　　　　　　　　　　curAttrVal = curEle.currentStyle[attr];

　　　　　　　　}

　　　　　　　　return curAttrVal ;

　　　　　　}