元素大小

offset dimension

元素的可见大小由高度和宽度决定，包括所有的内边距、滚动条和边框大小但是不包括外边框。通过下列几个元素可以取得元素的偏移量

• offsetHeight：元素在垂直方向上占用的空间大小，以像素计。包括元素高度、水平滚动条的高度、上边框高度和下边框高度。
• offsetWidth：元素在水平方向占用的空间大小，以像素计。包括元素的高度、垂直滚动条的的宽度、左边框和右边框的宽度
• offsetLeft：元素的左外边框至包含元素的左内边框之间的像素距离
• offsetTop：元素上边框至包含元素的上内边框的像素距离
• offsetParent 与当前元素最近的经过定位(position不等于static)的父级元素

通过上面几个属性，我们就能够得到元素的偏移量

function getLeft(element){
    var actualLeft=element.offsetLeft;
    var current=element.oeffsetParent;
    while(current!=null){
        actualLeft+=current.offsetLeft;
        current=current.oeffsetParent;
    }
    return actualLeft;
}
//top的同理

客户区大小指的是元素内容和内边距所占据的空间大小。有关客户区大小的属性就两个：clientWidth和clientHeight，之前BOM笔记中有提到这两个属性

• clientWidth属性是元素内容区宽度加上左右内边距宽度
• clientHeight属性是元素内容区高度加上上下边距高度

当然不同的浏览器对他们的支持总是不同的，所以我们在使用的时候要区分浏览器对视口的支持document.documentElement和document.body

function getViewPort(){
     if (compatMode=="BackCompat") {
        return {
            width:document.body.clientWidth,
            height:document.body.clientHeight
        }
     }else{
        return {
            width:document.documentElement.clientWidth,
            height:document.documentElement.clientHeight
        }
     }
}

滚动大小

有些元素在技师没有执行任何代码的时候也会自动添加滚动条；但是另外一些元素需要手动添加属性才能够滚动，但是我们能不能通过滚动位置的不同来操控相关属性呢，这边有四个和滚动大小相关的属性

• scrollHeight：在没有滚动条的情况下，元素内容的总高度
• scrollWidth：在没有滚动条的情况下，元素内容的总高度
• scrollLeft：被隐藏在内容区域左侧的像素数。通过设置这个属性可以改变元素的滚动位置
• scrollTop：被隐藏在内容区域上方的像素书。通过设置这个属性可以改变元素的滚动位置

需要注意的是在Firefox中，这两组属性始终相等，但是大小代表的是文档内容区域的实际尺寸，而非视口的大小

在Opera Safari Chrome中，scrollWidth和scrollHeight等于视口大小，clientWidth和clientHeight等于文档内容区域的大小，但是在IE中他们恰恰相反

当我们在确定文档总高度时，必须取得scrollHeight/scrollWidth/clientWidth/clientHeight中的最大值，才能保证在跨浏览器下得到最精确的结果。

var docHeight=Math.max(document.documentElement.scrollHeight,
document.documentElement.clientHeight);
console.log(docHeight)
var docWidth=Math.max(document.documentElement.scrollWidth,
document.documentElement.clientWidth);
console.log(docWidth);

在IE的混杂模式下，要使用document.body替换document.documentElement

当我们在通过scrollTop和scrollLeft属性的时候，我们可以设置元素的滚动位置，元素未滚动时，这两个属性的值为0，滚动了的时候，那么这两个属性的值会大于0。当我们给这两个属性赋值为0时，则重置了元素的滚动位置。

//类锚点链接，直接滚回顶部的函数
function scrollToTop(element){
    if (element.scrollTop!=0) {
        element.scrollTop=0;
    };
}

一个根据页面滚动大小来返回滚动位置的函数

var scrollToTop=function(){
//重置scrollTop
    var scrollTop=0;
    //判断在何种模式下
    if(document.documentElement&&document.documentElement.scrollTop){
        scrollTop="document.documentElement.scrollTop;
    }else if(document.body){
        scrollTop="document.body.scrollTop;
    }
    return scrollTop;
}