元素大小：
1，偏移量(offset dimension)：元素在屏幕上占用的所有可见的空间。
offsetHeight：元素在垂直方向上占用的空间大小，以像素计，包括元素的高度、(可见的)水平滚动条的高度、上边框高度和下边框高度
offsetWidth：元素在水平方向上占用的空间大小，以像素计，包括元素的宽度、(可见的)垂直滚动条的高度、左边框宽度和右边框宽度
offsetLeft：元素的左外边框至包含元素的左内边框之间的像素距离
offsetTop：元素的上外边框至包含元素的上内边框之间的像素距离
其中，offsetLeft、offsetTop属性与包含元素有关，包含元素的引用保存在offsetParent属性中。offsetParent属性不一定与parentNode的值相等，例如，<td>元素的offsetParent是作为其祖先元素的<table>元素，因为<table>是在DOM层次中距<td>最近的一个具有大小的元素。
,2，客户区大小(client dimension)：
指的是元素内容及其内边距所占据的空间大小。相关属性有两个：
clientWidth：元素内容区宽度加上左右内边距宽度
clientHeight：元素内容区高度加上上下内边距高度
客户区大小就是元素内容的空间大小，因此滚动条占用的空间不计算在内。如果要计算浏览器视口大小，可以使用document.documentElement或document.body(在IE7之前的版本中)的clientWidth和clientHeight：
function getViewport() {
if(document.compatMode == "BackCompat") {
return {
width : document.body.clientWidth,
height : document.body.clientHeight
};
} else {
return {
width : document.documentElement.clientWidth,
height : document.documentElement.Height
};
}
}
,3，滚动大小(scroll dimension)：
指的是包含滚动内容的元素的大小。
scrollHeight：在没有滚动条的情况下，元素内容的总高度
scrollWidth：在没有滚动条的情况下，元素内容的总宽度
scrollLeft：被隐藏在内容区域左侧的像素数，通过设置这个属性可以改变元素的滚动位置
scrollTop：被隐藏在内容区域上方的像素数，通过设置这个属性可以改变元素的滚动位置
scrollWidth和scrollHeight主要用于确定元素内容的实际大小。例如：通常认为<html>元素是在Web浏览的视口中滚动的元素(IE6之前的版本运行在混杂模式下时是<body>元素)。因此，带有垂直滚动条的页面总高度就是document.documentElement.scrillHeight。
对于不包含滚动条的页面而言，scrollWidth和scrollHeight与clientWidth和clientHeight之间的关系并不十分清晰。在这种情况下，基于document.documentElement查看这些属性会在不同浏览器之间发现一些不一致性问题，如下所述：
■Safari3.11之前的scrollWidth等于clientWidth，scrollHeight也等于clientHeight，这两组大小都等于浏览器视口大小。
■Firefox中这两组属性始终都是相等的，但大小代表的是文档内容区域的实际尺寸，而非视口的尺寸
■Opera、Safari3.1及更高版本、Chrome中的这两组属性是又差别的，其中scrollWidth和scrollHeight等于视口大小，而clientWidth和clientHeight等于文档内容区域的大小
■IE(在标准模式)中的这两组属性不相等，其中scrollWidth和scrollHeight等于文档内容区域的大小，而clientWidth和clientHeight等于视口大小。
在确定文档的总高度时(包括基于视口的最小高度时)，必须取得scrollWidth/clientWidth和scrollHeight/clientHeight中得最大值，才能保证在跨浏览器的环境下得到精确的结果。
4，确定元素大小：
IE、Firefox3及更高版本和Opera9.5及更高版本为每个元素都提供了一个getBoundingClientRect()方法。这个方法会返回一个矩形对象，包含4个属性：left、top、right和bottom。这些属性给出了元素在页面中相对于视口的位置。但是浏览器的实现稍有不同。IE认为文档的左上角坐标是(2, 2)，而Firefox和Opera则将传统的(0, 0)作为起点坐标。因此，就需要在一开始检查一下位于(0, 0)处的元素的位置，在IE中，会返回(2, 2)，而在其他浏览器中会返回(0, 0)。
function getBoundingClientRect(element) {
if(typeof arguments.callee.offset != "number") {
var scrollTop = document.documentElement.scrollTop;
var tmp = document.createElement("div");
tmp.style.cssText = "position:absolute;left:0;top:0;";
document.body.appendChild(tmp);
arguments.callee.offset = -tmp.getBoundingClientRect().top - scrollTop;
document.body.removeChild(tmp);
tmp = null;
}
var rect = element.getBoundingClientRect();
var offset = arguments.callee.offset;
return {
left : rect.left + offset,
right : rect.right + offset,
top : rect.top + offset,
bottom : rect.bottom + offset
};
}
