网页里的各种高度和宽度(1) clientHeight、offsetHeight和scrollHeight
2010-01-18 09:36
501 查看
在做页面设计的时候经常遇到要操作页面的各种高度和宽度 , 里面有很多容易混淆的的参数 . 现在参考网上的资料做一次整理 , 希望对不是很清楚的朋友起到一点帮助作用 .
一下内容文字内容引用自 : 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 写在前面) .
一下内容文字内容引用自 : 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 写在前面) .
相关文章推荐
- JavaScript获取浏览器高度和宽度值(documentElement,clientHeight,offsetHeight,scrollHeight,scrollTop,offsetParent,offsetY,innerHeight)
- JavaScript获取浏览器高度和宽度值(documentElement,clientHeight,offsetHeight,scrollHeight,scrollTop,offsetParent,
- JavaScript获取浏览器高度和宽度值(documentElement,clientHeight,offsetHeight,scrollHeight,scrollTop,offsetParent,offsetY,innerHeight)
- JavaScript获取浏览器高度和宽度值(documentElement,clientHeight,offsetHeight,scrollHeight,scrollTop,offsetParent,
- 网页设计中scrollHeight,offsetHeight,clientHeight在各个浏览器中的区别
- js获取宽度 ,各种高度宽度document.body.clientWidth , document.body.clientHeight,window.screen.width 等等
- 这该死的高度,height,clientHeight,scrollHeight,offsetHeight
- 网页里的各种高度和宽度(2) offsetTop、offsetLeft、offsetWidth、offsetHeight
- 网页里的各种高度和宽度(3)scrollTop、scrollLeft、scrollWidth、scrollHeight
- JavaScript基础 IE 7,8可用 获取网页的宽度与高度 document.documentElement.clientHeight
- 各种位置和高度计算:.position()、.offset()、.outerHeight()、.scrollTop、.scrollHeight、.clientHeight
- JavaScript基础 IE 7,8可用 获取网页的宽度与高度 document.documentElement.clientHeight
- textarea高度自适应增高;chrome下clientHeight,offsetHeight和scrollHeight
- js获取宽度 ,各种高度宽度document.body.clientWidth , document.body.clientHeight,window.screen.width 等等
- clientHeight、scrollHeight、offsetHeight和scrollTop之间区别
- vs2005里取得offsetHeight,clientHeight,scrollHeight 三个属性值全都一样的问题
- jQuery,javascript获得网页的高度和宽度$(document).height / $(window).height
- 四种浏览器对 clientHeight、offsetHeight、scrollHeight、clientWidth、offsetWidth 和 scrollWidth 的解释差异
- 解析offsetHeight,clientHeight,scrollHeight之间的区别
- 再次详解clientHeight、offsetHeight、scrollHeight