JavaScript中页面与元素大小

最近写demo时总觉得自己分不清元素的几种获取大小的具体包括哪些，在搜索资料时看见这张图，看着挺杂的，还是自己分分类比较看得清楚。

今天的内容

一、偏移量

offsetHeight 元素在垂直方向上的高度：内容、内边距、边框
offsetWidth 元素在水平方向的宽度：内容、内边距、边框
offsetLeft 元素的左外边框到包含元素的左内边框
offsetTop 元素的上外边框到包含元素的上内边框
offsetParent 包含元素
这是定义，但是：
当元素包含在div中，类似

元素的offsetParent是body元素，对应的元素的offsetLeft与offsetTop都是元素距离body的距离。

二、客户区大小

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;
    }
  }
}

混杂模式下和标准模式下，Chrome、Opera、FireFox大多数情况下运行在标准模式下，因此进入else，函数返回一个对象，包含width好height属性。因此确定浏览器可视区域大小总是使用：
document.documentElement.clientWidth; document.documentElement.clientHeight;

三、滚动大小

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

scrollHeight和scrollWidth主要用于确定元素内容的实际大小。通常认为是在Web浏览器的视口中滚动的元素（IE6之前版本运行在混杂模式下时是元素）。因此，带有垂直滚动条的页面总高度就是
document.documentElement.scrollHeight

不包含滚动条的页面中，通过document.documentElement获取
scrollHeight、scrollWidth与clientHeight、clientWidth
1、FireFox下两组属性相等，等于可视区域宽度与高度
2、Chrome中宽度都等于可视区域宽度，clientHeight可视区域高度，scrollHeight文档内容高度
3、IE8以上两组属性相等，等于可视区域宽度与高度