页面中元素大小的确定

1.元素在页面上的偏移量

offsetHeight: content高度+上下内边距高度+上下边框高度
offsetWidth：content宽度+左右内边距宽度+左右边框宽度
offsetLeft：左margin
offsetTop：上margin

//获得元素在页面上的左偏移量
function getElementLeft(element){
       var elementLeft = element.offsetLeft;
       var elementParent = element.offsetParent;
       while(elementParent != null){
           elementLeft += elementParent.offsetLeft;
           elementParent = elementParent.offsetParent;
       }
       return elementLeft;
    }

//获得元素在页面上的上偏移量
function getElementTop(element){
       var elementTop = element.offsetTop;
       var elementParent = element.offsetParent;
       while(elementParent != null){
           elementTop += elementParent.offsetTop;
           elementParent = elementParent.offsetParent;
       }
       return elementTop;
    }

2.元素的客户区大小（内容+内边距），常用于确定浏览器视口大小document.documentElement 或者 document.body

clientWidth : content宽度+左右内边距宽度
clientHeight：content高度+上下内边框高度

3.包含滚动内容的元素的大小

scrollHeight: 真正所有内容（包括隐藏的）的高度
scrollWidth：真正所有内容（包括隐藏的）的宽度
scrollLeft：被隐藏的左边内容宽度（可以改变元素滚动位置）
scrollTop：被隐藏的上面内容宽度（可以改变元素滚动位置）