HTML 元素大小

offsetHeight ,offsetWidth ,offsetLeft offsetTop clientWidth clientHeight scrollHeight scrollWidth scrollLeft scrollTop，返回的都是纯数字

1、元素的偏移量

元素的可见大小是由其高度、宽度决定，包括所有的内边距、滚动条和边框大小（不包括外边距）。

offsetHeight ：元素在垂直方向上占用的空间大小，以像素计算。包括元素的高度，水平滚动条高度，上下边框高度。

offsetWidth ：元素在水平方向上占用的空间大小，以像素计算。 包括元素的宽度，垂直滚动条高度，左右边框高度。

offsetLeft ：元素的左外边框至包含元素的左内边框之间的像素距离。

offsetTop ：元素的上外边框至包含元素的上内边框之间的像素距离。

offsetParent ：元素的包含元素，找离自己最近有定位的父元素。元素的offsetParent不一定和parentNode相等。例如，<td>元素的offsetParent是祖先元素<table>，因为<table>是在DOM层次中距离<td>最近的一个具有大小的元素。

返回一个指向最近的（指包含层级上的最近）包含该元素的定位元素或者最近的 table,td,th,body元素。当元素的 style.display 设置为 "none" 时，offsetParent 返回 null。offsetParent 很有用，因为 offsetTop 和 offsetLeft 都是相对于其内边距边界的。

偏移量属性是只读属性，每次访问都需要重新计算。

 function getElementLeft(element){
     var actualLeft = element.offsetLeft;
     var current = element.offsetParent;

     while(current != null){  // 循环至根元素 body
         actualLeft += current.offsetLeft;
         current = current.offsetParent;
     }

     return actualLeft;
 }

 function getElementTop(element){
      var actualTop = element.offsetTop;
      var current = element.offsetParent;

      while(current != null){  // 循环至跟元素 body
          actualTop += current.offsetTop;
          current = current.offsetParent;
      }

      return actualTop;
 }

上述两个方法在简单的页面布局中，结果很准确，但对于使用表格和内嵌框架布局的页面，不同浏览器实现不同，结果也会有些不同。

function getElementTopToRoot(element,root){

    if(root != undefined && element == root){
        return 0;
    }
    if(root == undefined){
        root = null
    }

    var actualTop = element.offsetTop;
    var current = element.offsetParent;

    while(current != root && current != null){  // 循环至根元素
        actualTop += current.offsetTop;
        current = current.offsetParent;
    }
    return actualTop;
}
function getElementLeftToRoot(element,root){

    if(root != undefined && element == root){
        return 0;
    }
    if(root == undefined){
        root = null
    }

    var actualLeft = element.offsetLeft;
    var current = element.offsetParent;

    while(current != root && current != null){  // 循环至根元素
        actualLeft += current.offsetLeft;
        current = current.offsetParent;
    }
    return actualLeft;
}

2、元素的客户区大小

元素的客户区大小值得是元素内容及其内边距所占据的空间大小，不计滚动条所占空间。

clientWidth ：元素内容区宽度加左右内边距的宽度

clientHeight ：元素内容区高度加上下内边距的高度

这个最常用来确定浏览器视口的大小。客户区大小是只读属性，每次访问都需要重新计算。

3、滚动大小

滚动大小指的是包含滚动内容的元素大小。

scrollHeight ：滚动元素高度，没有滚动条的情况下，是元素内容的总高度

scrollWidth ：滚动元素的宽度，没有滚动条的情况下，是元素内容的总宽度

scrollLeft ：被隐藏在内容区左侧的宽度，可读可设置

scrollTop ：被隐藏在内容区上方的高度，可读可设置

//获取文档总高度/总宽度
 function getPageDimension(){
     if(document.compatMode == "BackCompat"){  // 混杂模式
         return {
             width:Math.max(document.body.scrollWidth,document.body.clientWidth),
             height:Math.max(document.body.scrollHeight,document.body.clientHeight)
         };
     } else {
         return {
             width:Math.max(document.documentElement.scrollWidth,document.documentElement.clientWidth),
             height:Math.max(document.documentElement.scrollHeight,document.documentElement.clientHeight)
         }
     }
 }

 //将元素回滚到顶部
 function scrollToTop(element){
     if(element.scrollTop != 0){
         element.scrollTop = 0;
     }
 }

4、元素大小

IE、Firefox、Safari、Opera、Chrome为每个元素都提供了一个getBoundingClientRect() 方法。返回一个矩形对象，表示元素相对于视口的位置，有四个属性：

left：元素左边框至视口的左侧的距离

right：元素右边框至视口左侧的距离

top：元素上边框至视口上侧的距离

bottom：元素下边框至视口上侧的距离

所以，right - left 是元素的宽度，bottom - top 是元素的高度

 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");  // IE8 - 中文档左上角的坐标是（2，2），其他是（0，0）
             temp.style.position = "absolute";
             temp.style.left = "0px";
             temp.style.top = "0px";
             //temp.style.cssText = "position:absolute;left:0;top:0";
             document.body.appendChild(temp);
             arguments.callee.offset = -temp.getBoundingClientRect().top - scrollTop;
             document.body.removeChild(temp);
         }

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