1、视口大小与窗口大小的概念

1、网页的大小，通常由内容和CSS样式表决定

2、浏览器窗口的大小，指在浏览器窗口中看到的那部分网页面积，又叫做viewport(视口)

很显然，如果网页的内容能够在浏览器窗口中全部显示(也就是不出现滚动条)，那么网页的大小和浏览器窗口的大小是相等的。如果不能全部显示，则滚动浏览器窗口，可以显示出网页的各个部分。

2、clientHeight和clientWidth属性、clientLeft、clientTop

clientHeight：包括content+padding，但不包括border、水平滚动条、margin的元素的高度。

注意：对于inline的元素这个属性一直是0，单位px，只读元素。它和元素的滚动、位置没有关系它代表元素的高度。

因此，document根元素的clientHeight和clientWidth属性，就代表了浏览器的大小，即视口的大小

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

注意以下三点：

1）这个函数必须在页面加载完成后才能运行，否则document对象还没生成，浏览器会报错。

2）大多数情况下，都是document.documentElement.clientWidth返回正确值。但是，在IE6的quirks模式中，document.body.clientWidth返回正确的值，因此函数中加入了对文档模式的判断。

3）clientWidth和clientHeight都是只读属性，不能对它们赋值。

clientTop：返回的是元素周围边框的厚度,如果不指定一个边框或者不定位该元素,它的值就是0。

2、offsetHeight和offsetWidth、offsetLeft、offsetTop

offsetHeight：包括contnet+padding+border+水平滚动条，但不包括margin的元素的高度。

注意：对于inline的元素这个属性一直是0，单位px，只读元素。它和元素的滚动、位置没有关系它代表元素的高度

offsetTop: 表示该元素的左上角与父容器（offsetParent对象）左上角的距离,和有没有滚动条没有关系。单位px，只读元素。它和元素的滚动、位置没有关系。

//获得元素的绝对纵距离
function getElementTop(element){
    var actualTop = element.offsetTop;
    var current = element.offsetParent;
    
    while (current !== null){
        actualTop += current.offsetTop;
        current = current.offsetParent;
    }
    return actualTop;
}
//相对距离：该元素左上角相对于浏览器窗口左上角的坐标
//相对距离高度=绝对距离高度-滚出高度

由于在表格和iframe中，offsetParent对象未必等于父容器，所以上面的函数对于表格和iframe中的元素不适用。

3、scrollWidth和scrollHeight、scrollTop、scrollLeft

接下来讨论出现有滚动条时的情况：

当本元素的子元素比本元素高且overflow=scroll时，本元素会scroll，这时： scrollHeight:因为子元素比父元素高，父元素不想被子元素撑的一样高就显示出了滚动条，在滚动的过程中本元素有部分被隐藏了，scrollHeight代表包括当前不可见部分的元素的高度。而可见部分的高度其实就是clientHeight，也就是scrollHeight>=clientHeight恒成立。在有滚动条时讨论scrollHeight才有意义，在没有滚动条时scrollHeight==clientHeight恒成立。单位px，只读元素。

scrollTop: 代表在有滚动条时，滚动条向下滚动的距离也就是元素顶部被遮住部分的高度。在没有滚动条时scrollTop==0恒成立。单位px，可读可设置。

document对象的scrollHeight和scrollWidth属性就是网页的大小，意思就是滚动条滚过的所有长度和宽度

function getPagearea(){
    if (document.compatMode == "BackCompat"){
        return {
            width: Math.max(document.body.scrollWidth,
                            document.body.clientWidth),
            height: Math.max(document.body.scrollHeight,
                            document.body.clientHeight)
        }
    } else {
        return {
                width: Math.max(document.documentElement.scrollWidth,
                            document.documentElement.clientWidth),
                height:Math.max(document.documentElement.scrollHeight,
                            document.documentElement.clientHeight)
            }
    }
}

scrollTop：滚出去的高度。对于不可以滚动的元素,这些值总是0。

4、getBoundingClientRect()方法

可以立刻获得网页元素的位置，那就是使用getBoundingClientRect()方法。它返回一个对象，其中包含了left、right、top、bottom四个属性，分别对应了该元素的左上角和右下角相对于浏览器窗口（viewport）左上角的距离。

width=content+padding+border 不包含滚动和margin

DOM2和DOM3--(2)宽高

1、视口大小与窗口大小的概念

2、clientHeight和clientWidth属性、clientLeft、clientTop

2、offsetHeight和offsetWidth、offsetLeft、offsetTop

3、scrollWidth和scrollHeight、scrollTop、scrollLeft

4、getBoundingClientRect()方法