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();