网页里的各种高度和宽度(1) clientHeight、offsetHeight和scrollHeight

在做页面设计的时候经常遇到要操作页面的各种高度和宽度 , 里面有很多容易混淆的的参数 . 现在参考网上的资料做一次整理 , 希望对不是很清楚的朋友起到一点帮助作用 .

一下内容文字内容引用自 : www.cftea.com , 我对其进行简单编辑 , 配合文字给出了图例 , 希望能更加明了  (由于近期CSDN无法上传图片,故从别处连接图片,可能无法显示,有个麻烦的方法,就是右击查看图片属性,直接拷贝图片地址在浏览器里查看,日后CSDN恢复图片上传的话,在修改过来).

clientHeight 、 offsetHeight 和 scrollHeight

在页面没指定 DOCTYPE 的情况下 :

clientHeight 指页面的内容可视区域 , 如图

offsetHeight

IE, Opera 认为 offsetHeight = clientHeight + 滚动条 + 边框

 

FF,NS 认为 offsetHeight 是网页的实际内容 , 可以比 clientHeight 小

 

 

scrollHeight

IE, Opera 认为 scrollHeight 是网页内容的实际高度 , 可以比 clientHeight 小 .

FF,NS 认为 scrollHeight 是网页的高度 , 不过最小值是 clientHeight.

 

同理 clientWidth 、 offsetWidth 和 scrollWidth 的解释与上面相同，只是把高度换成宽度即可。

 

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

 

如果指定了 DOCTYPE ，比如： DTD XHTML 1.0 Transitional ，则意义又会不同，在这种情况下这三个值都是同一个值，都表示内容的实际 高度。新版本的浏览器大多支持根据页面指定的 DOCTYPE 来启用不同的解释器。如果要在指定的 DOCTYPE 下按上述意义来应用，怎么办呢？答案是：将 document.body 和 document.documentElement 一起应用，比如： document.documentElement.scrollLeft || document.body.scrollLeft （一般将 document.documentElement 写在前面） .