元素大小

摘自《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
                }
            }
        }