楼楼之前一看到scrollWidth和clientWidth之类的就一个头两个大,根本就没搞明白几个宽度的含义。
刚好最近学习视差滚动网页的编写,所以一定要搞清楚scrollTop之类的含义。才能理解的更加透彻的说。
废话少说,首先我们看一段代码:
<textarea wrap="on"
οnclick="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】