scrollWidth,clientWidth和offsetWidth的不同

楼楼之前一看到scrollWidth和clientWidth之类的就一个头两个大，根本就没搞明白几个宽度的含义。

刚好最近学习视差滚动网页的编写，所以一定要搞清楚scrollTop之类的含义。

才能理解的更加透彻的说。

废话少说，首先我们看一段代码：

<textarea wrap="on"

onclick="alert(

'scrollWidth:'+this.scrollWidth+

'\n scrollHeight:'+this.scrollHeight+

'\n offsetWidth:'+this.offsetWidth+

'\n offsetHeight:'+this.offsetHeight+

'\n clientWidth:'+this.clientWidth+

'\n clientHeight:'+this.clientHeight

);"></textarea>

这里点击textarea就弹出了这个元素的六个对象的值，wrap="on"指的是开启换行，这会影响到有无滚动条，从而影响到scrollWidth/scrollHeight和clientWidth/clientHeight的值。

我们先来看测试效果：

wrap为on，可以换行的情况下：

1，初始状态：



我们可以看到

scrollWidth=177,offsetWidth=179,clientWidth=177;

scrollHeight=34,offsetHeight=36,clientHeight=34;

srollWidth和clientWidth相等，而offsetWidth/offsetHeight多出2。

至少我们可以推断，offsetWidth/offsetHeight包括了边框的值：offsetWidth/offsetHeight=clientWidth/clientHeight+2

2，填充值的状态：



我们可以看到：

scrollWidth=162, offsetWidth=179, clientWidth=162;

scrollHeight=66,offsetHeight=36,clientHeight=34;

srollWidth变窄，offsetWidth不变，clientWidth也变窄。

scrollHeight由之前的34变成了66，所以，scrollWidth和scrollHeight的意思是此刻 对象的实际内容的宽度和高度；

clientWidth由177变成了162，而clientHeight没有变化。所以，clientWidth和clientHeight不包含边框和滚动条，表示的是此时此刻 对象可见内容的宽度和高度。

offsetWidth和offsetHeight一直没有变化，所以，offsetWidth和offsetHeight表示的就是对象包括边框和滚动条的宽度/高度。

到这里我们应该明白了scrollWidth/Height，clientWidth/Height，offsetWidth/Height的意思了吧。

scrollWidth指的是对象实际内容的宽度；

clientWidth指的是对象可见内容的宽度（不算边框和滚动条）；

offsetWidth指的是对象看到的宽度（包括边框和滚动条）；

当我以为就这么简单的时候，有个声音告诉我太连清了少年。

还有scrollTop，scrollLeft，offsetTop和offsetLeft，这又是什么东东？？这是对象距离哪个的高度？scrollTop和offsetTop又有什么不同？？？

我们来看下面一张图（网上找的）：



灰色的大背景document是整个网页的全部尺寸，中间的browser是我们浏览器的宽高。

“DIV element client area”是这个div元素的可见区域，“DIV element scroll area”是这个div内容原始尺寸，但是由于div的css所设置的高度宽度容不下它的内容，所以出现滚动条。

我们可以看到最下面三条线，黑色的是clientWidth表示对象可见内容的宽度，蓝色的是offsetWidth表示包含边框和滚动条的对象宽度，红色的是scrollWidth表示对象的实际宽度。

那么offsetTop呢，从图上可以看到从“DIV element client area”的边一直到整个文档的最上端，都是offsetWidth。offsetLeft是元素到文档的最左端。

所以，

offsetLeft、offsetTop：表示对象的上边距/左边距相对于文档最顶端或最左端的距离。

scrollTop、scrollLeft：表示的是对象的上边距/左边距相对于实际区域的最顶端或最左端的距离（换句话说就是被卷进去的长度）。

还有一张图，表示针对文档（document）的各个height、width、top、left：



和针对某个元素的情况不太相同，当前时间的这个点oEvent有x，y坐标。

body相对于浏览器有clientTop和clientLeft，不过一般对于FF和chrome为0；

body的scrollWidth就是整个文档的宽度，scrollHeight为整个文档的高度。

【粘一段上来：

这里说说四种浏览器对 document.body 的 clientHeight、offsetHeight 和 scrollHeight 的解释。
这四种浏览器分别为IE（Internet Explorer）、NS（Netscape）、Opera、FF（FireFox）。
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 则是网页内容实际高度。 同理 clientWidth、offsetWidth 和 scrollWidth 的解释与上面相同，只是把高度换成宽度即可。

如果添加W3C的标准： http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 在页面中添加这行标记的话 ，
在IE中：
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度
注：在IE中“可见区域”基本不认可body，而必需使用documentElement！！！！
在FireFox中：
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度
在Opera中：
document.body.clientWidth ==> 可见区域宽度
document.body.clientHeight ==> 可见区域高度
document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）
document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）
获取窗口高宽： var w= document.documentElement.offsetWidth;
var h=document.documentElement.offsetHeight;
】

=====阿桃的CSDN博客：http://blog.csdn.net/taotao6039=====

【转载请注明出处：http://blog.csdn.net/taotao6039/article/details/17917537】