element.clientWidth   //返回元素的可见宽度

element.clientHeight   //返回元素的可见高度

element.clientTop

element.clientLeft


Ghrome中：

    clientTop = borderTop

    clientLeft = borderLeft

    clientWidth = width + padding

    clientHeight = height + padding


   (client和offset与所包含的元素宽高无关）


element.scrollWidth      //返回元素的总体宽度

element.scrollHeight     //返回元素的总体高度

element.scrollTop        //返回元素上边缘与视图之间的距离。

element.scrollLeft       //返回元素左边缘与视图之间的距离


Ghrome中：

     scrollWidth = 所包含元素的总宽度 + padding-left

     scrollHeight = 所包含元素的总高度 + padding-top

        注：所包含元素的总宽度是指：width + padding + border + margin


     当元素设置了overflow属性，滚动元素后：

     scrollLeft的最大值为 = scrollWidth - clientWidth 


element.offsetWidth     //返回元素的宽度

element.offsetHeight    //返回元素的高度

element.offsetTop       //返回元素的垂直偏移位置。

element.offsetLeft      //返回元素的水平偏移位置。


Ghrome中：

      offsetWidth = width + padding + border

      offsetHeight = height + padding + border

      offsetTop  获取对象相对于版面或

                 由 offsetTop 属性指定的父坐标的计算顶端位置

      offsetLeft 获取对象相对于版面或

                 由 offsetParent 属性指定的父坐标的计算左侧位置


style.top:

我们知道 offsetTop 可以获得 HTML 元素距离上方或外层元素的位置，

style.top 也是可以的，

二者的区别是：

     一、offsetTop 返回的是数字，

         而 style.top 返回的是字符串，除了数字外还带有单位：px。

     二、offsetTop 只读，而 style.top 可读写。

     三、如果没有给 HTML 元素指定过 top 样式，则 style.top 返回的是空字符串。

offsetLeft 与 style.left、offsetWidth 与 style.width、offsetHeight 与 style.height 也是同样道理。


clientHeight
大家对 clientHeight 都没有什么异议，都认为是内容可视区域的高度，也就是说页面浏览器中可以看到内容的这个区域的高度，一般是最后一个工具条以下到状态栏以上的这个区域，与页面内容无关。

offsetHeight
IE、Opera 认为 offsetHeight = clientHeight + 滚动条 + 边框。
NS、FF 认为 offsetHeight 是网页内容实际高度，可以小于 clientHeight。

scrollHeight
IE、Opera 认为 scrollHeight 是网页内容实际高度，可以小于 clientHeight。
NS、FF 认为 scrollHeight 是网页内容高度，不过最小值是 clientHeight。

简单地说
clientHeight 就是透过浏览器看内容的这个区域高度。
NS、FF 认为 offsetHeight 和 scrollHeight 都是网页内容高度，只不过当网页内容高度小于等于 clientHeight 时，scrollHeight 的值是 clientHeight，而 offsetHeight 可以小于 clientHeight。
IE、Opera 认为 offsetHeight 是可视区域 clientHeight 滚动条加边框。scrollHeight 则是网页内容实际高度。


参考：http://blog.csdn.net/xuantian868/article/details/3116442


应用：

制作可以滚动显示的控件
function Scroll(){ console.log(div1.scrollLeft) //如果滚动到末端，从头开始开始滚动 if(div1.scrollWidth-div1.clientWidth<=div1.scrollLeft){ div1.scrollLeft = 0; } else div1.scrollLeft++; setTimeout(Scroll,15) } Scroll();