摘自《JavaScript高级程序设计》
1、offsetWidth/offsetHeight返回值包含content + padding + border，效果与e.getBoundingClientRect()相同
2、clientWidth/clientHeight返回值只包含content + padding，如果有滚动条，也不包含滚动条
3、scrollWidth/scrollHeight返回值包含content + padding + 溢出内容的尺寸
一、偏移量
1、offsetHeight: 元素在垂直方向上占用的空间。包括：元素高度 +（可见的）水平滚动条高度 + 上下边框高度；
2、offsetWidth：元素在水平方向上占用的空间。元素宽度 + 垂直滚动条宽度 + 左右边框宽度；
3、offsetLeft：元素的左外边框，至，包含元素的左内边框之间的距离；
4、offsetTop：元素的上外边框，至，包含元素的上内边框之间的距离。
二、客户区大小
1、clientWidth：元素content宽度 + 左右padding;
2、clientHeight：元素content高度 + 上下padding高度；
三、滚动大小
1、scrollWidth：在没有滚动条的情况下，元素内容的总宽度；
2、scrollHeight：在没有滚动条的情况下，元素内容的总高度；
3、scrollLeft：被隐藏在内容区域左侧的像素数。通过设置改属性可以改变元素的滚动位置；
4、scrollTop：被隐藏在内容区域上方的像素数。通过设置改属性可以改变元素的滚动位置；
注意：
1、带有垂直滚动条的页面总高度为document.documentElement.scrollHeight；
2、对于不包含滚动条的页面，scrollHeight和scrollWidth 与 clientHeight和clientWidth的关系，在不同浏览器之间存在差异：
(1) Firefox中两组属性相等，但大小代表的是文档内容区域的实际尺寸，而非视口的尺寸；
(2) Opera、Safari 3.1及以上、Chrome中：
scrollWidth 和 scrollHeight = 视口大小，
clientWidth和clientHeight = 文档内容区域大小；
(3) IE(标准模式)中：
scrollWidth 和 scrollHeight = 文档内容区域大小，
clientWidth和clientHeight = 视口大小
四、确定元素大小
getBoundingClientRect()：返回一个矩形对象，包括： left、top、right、bottom，给出页面中相对于视口的位置。IE8及更早版本认为文档的左上角坐标是(2, 2)，其它浏览器则是(0, 0)。
// 跨浏览器可用的getBoundingClientRect()函数
function getBoundingClientRect(element) {
var scrollTop = document.documentElement.scrollTop;
var scrollLeft = document.documentElement.scrollLeft;
if(element.getBoundingClientRect) {
if(typeof arguments.callee.offset != "number") {
var temp = document.createElement("div");
temp.style.cssText = "position:absolute;left:0;top:0;";
document.body.appendChild(temp);
arguments.callee.offset = -temp.getBoundingClientRect().top - scrollTop;
document.body.removeChild(temp);
temp = 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
};
} else {
var actualLeft = getElementLeft(element);
var actualTop = getElementTop(element);
return {
left: actualLeft - scrollLeft,
right: actualLeft + element.offsetWidth - scrollLeft,
top: actualTop - scrollTop,
bottom: actualTop + element.offsetHeight - scrollTop
}
}
}
