js盒子模型

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

1、client系列：

clientWidth=设置的宽度（width）+内边距（padding）*2

clientHeight=设置的高度（height）+内边距（padding）*2

clientLeft=左边框的宽度（border的宽度大小）

clientTop=上边框的高度（border的宽度大小）

确定浏览器的视口大小

function getViewport(){
    if(document.compatMode=="BackCompat"){ //检测浏览器是否运行在混杂模式下
        return{
            width:document.body.clientWidth,  //IE7之前的版本使用
            height:document.body.clientHeight
        };
    }else{
        return{
            width:document.documentElement.clientWidth,
            height:document.documentElement.clientHeight
        };
    }
}

2、offset系列：

offsetWidth=clientWidth+边框大小（border）*2

offsetHeight=clientHeight+边框大小（border）*2

offsetLeft=div的左外边框到父元素的左内边框的距离（margin）

offsetTop=div的上外边框到父元素的上内边框的距离（margin）

注意：offsetLeft、offsetTop使用时父元素必须定位（position：absolute/relative/fixed），否则逐层向上寻找直到body元素

offsetParent：目标div的父元素

取得元素的左偏移量和上偏移量

function getElementLeft(element){
    var actualLeft=element.offsetLeft;
    var current=element.offsetParent;
    while(current!==null){
        actualLeft+=current.offsetLeft;
        current=current.offsetParent;
    }
    return actualLeft;
}

function getElementTop(element){
    var actualTop=element.offsetTop;
    var current=element.offsetParent;
    while(current!==null){
        actualTop+=current.offsetTop;
        current=current.offsetParent;
    }
    return actualTop;
}

3、scroll系列：

scrollHeight：真实内容高度（包含溢出）+上边距（padding）

scrollWidth：真实内容宽度（包含溢出）+左边距（padding）

scrollLeft：被隐藏在内容区域左侧的像素数（滚动条卷去的宽度）

scrollTop：被隐藏在内容区域上方的像素数（滚动条卷去的高度）

在确定文档的总高度时（包括基于视口的最小高度时），必须取得scrollWidth/clientWidth和scrollHeight/clientHeight

中的最大值，才能保证在跨浏览器的环境下得到精确的结果

var docWidth=Math.max(document.documentElement.scrollWidth,document.documentElement.clientWidth);
var docHeight=Math.max(document.documentElement.scrollHeight,document.documentElement.clientHeight);
对于运行在混杂模式下的IE，则需要用document.body代替document.documentElement