正在写一个飞机大战的小游戏，编写过程中发现一个小问题：当获取隐藏元素尺寸时，offsetWidth与offsetHeight属性无效。研究一番，发现原来是由于这两个属性是元素通过css渲染到页面上时才计算的，而display:none的隐藏元素不参与渲染，因此无法获取尺寸。解决方法很简单，使用height:0px来隐藏元素即可。
趁此机会，总结一下几个易混淆的用于获取元素尺寸和位置的属性。

偏移量（offset dimension）

偏移量包括元素在屏幕上占用的所有可见空间，包括所有内边距、滚动条和边框大小。只读。
offsetHeight:元素在垂直方向占用空间大小。包括元素内容区高度、上下内边距高度、（可见）水平滚动条高度和上下边框高度。
offsetWidth:元素在水平方向占用空间大小。包括元素区宽度、左右内边距宽度、（可见）垂直滚动条的宽度和左右边框的宽度。
offsetLeft:元素的左外边框距离定位父元素（保存在offsetParent属性中）的距离。
offsetTop：元素的上外边框距离定位元素（保存在offsetParent属性中）的距离。

offsetParent属性的值:
（规律适用范围：table和内嵌框架布局页面除外的简单css布局页面）
1.如果有已定位（position属性不为static）的父元素，offsetParent属性的值是经过定位的这个父元素。
2.如果没有已定位的父元素，且元素自身position属性不为fixed,offsetParent属性的值是body。
3.如果元素本身使用了fixed进行定位，offsetParent属性值为null,这是因为fixed是相对视口定位，无定位父元素（但在Firefox中返回body）。

客户区大小（client dimension）

客户区大小指的是元素内容及其内边距所占用的空间大小，不包括滚动条。只读。
clientHeight:元素内容区高度加上下内边距的高度。
clientWidth:元素内容区宽度加左右内边距的宽度。
clinetLeft:元素左边框宽度。
clientTop:元素上边框高度。

确定浏览器视口/网页可视区域大小的方法：
运行在标准模式下的IE6+、Chrome、Opera、Firefox、Safari,以及运行在混杂模式下的Chorme和Safari:
document.documentElement.clientHeight:浏览器视口高度。
document.documentElement.clientWidth:浏览器视口宽度。
运行在混杂模式中的IE6+、Chrome、Safari、Firefox、Safari：
docuemnt.body.clientHeight:浏览器视口高度。
docuemnt.body.clientWidth:浏览器视口宽度。

兼容方法：检查document.compatMode属性，判断页面是否处于标准模式，标准模式使用document.documentELement,混杂模式或document.compatMode属性不存在则使用document.body。

滚动大小（scroll dimension)

滚动大小指的是包含滚动内容的元素的大小,除了一些元素（如html元素）以外，另外一些元素都需要通过CSS的overflow属性进行设置才能滚动。
scrollHeight:在没有滚动条的情况下，元素内容的总高度。
scrollWidth:在没有滚动条的情况下，元素内容的总宽度。
scrollLeft:被隐藏在内容区域左侧的像素数，通过设置这个属性可以改变元素的滚动位置。
scrollTop:被隐藏在内容区域上方的像素数，通过设置这个属性可以改变元素的滚动位置。

确定文档总高度时，必须取得scrollWidth/clientWidth和scrollHeight/clientHeight中的最大值，才能保证在跨浏览器环境下得到精确结果。对于大多数浏览器，使用document.documentElement。对于运行在混杂模式下的IE，需要使用document.body代替document.documentElement。