clientHeight、offsetHeight、scrollHeight对比测试分析



    前两天修改代码时接触到网页高度和可视区域高度的概念,发现clientHeight、offsetHeight、scrollHeight在不同的浏览器里会有不同的结果,于是做了一下测试。

    HTML 4.01下的测试

    测试代码如下:



    提示:你可以先修改部分代码再运行。

    测试使用现在主流的四个浏览器:IE、Firefox、Opera、Chrome。数据太多,测试结果不予列出。

    HTML 4.01下的测试结果分析:

    document.body.clientHeight

    在各个浏览器中都是等于内容可视区域的高度。内容可视区域是指浏览器最后一个工具条以下到状态栏以上的区域,与页面内容无关,如有滚动条的话则排除滚动条所占的区域。因为各浏览器对宽度超过屏幕宽度、高度为0的div是否会使屏幕出现滚动条理解不一,因此测试结果会略有不同。测试结果显示Firefox不显示滚动条,IE、Opera、Chrome都会显示滚动条。

    document.body.offsetHeight

    IE和Opera下该值一直等于document.body.clientHeight+滚动条高度+窗口边框(IE为4,Opera为0),即浏览器最后一个工具条以下到状态栏以上的区域的高度。

    Firefox下该值等于网页内容实际高度,即body上下border外延之间的距离(包括body的border和padding、不包括body的margin,通过对body标签增加样式对比结果可知),可小于document.body.clientHeight。
    注:body的border和padding默认值为0px,margin-top和margin-bottom默认值IE为15px、其他为8px。

    Chrome下该值等于网页内容实际高度(定义同上);但当网页内容实际高度于document.body.clientHeight时,该值等于document.body.clientHeight-body的margin宽度。

    document.body.scrollHeight

    IE下该值等于网页内容实际高度(定义同上)+body的上下magin宽度,可小于document.body.clientHeight。

    Firefox、Opera、Chrome下该值等于网页内容实际高度(定义同上)+body的上下magin宽度;但当等于网页内容实际高度(定义同上)+body的上下magin宽度小于document.body.clientHeight时,该值等于document.body.clientHeight。

    document.documentElement.clientHeight

    IE下该值一直为0。

    Firefox和Opera下该值等于网页内容实际高度(定义同上)+body的上下magin宽度,可小于document.body.clientHeight。

    Chrome下该值等于document.body.scrollHeight。

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

    出于浏览器兼容的考虑,要获取页面的实际高度就需要区别获取。显得麻烦。

    注:不指定doctype,结果与上述测试相同,即HTML 4.01是浏览器的默认渲染模式。

    XHTML 1.1下的测试

    下面修改HTML文档的doctype,只修改了前两行代码,将测试代码改为如下:

    提示:你可以先修改部分代码再运行。

    依然使用上述四个浏览器——IE、Firefox、Opera、Chrome进行测试。数据太多,测试结果不予列出。

    XHTML 1.1下的测试结果分析:

    document.body.clientHeight / document.body.offsetHeight

    都相等,且各浏览器表现一致,都等于页面内容实际高度(定义同上),最小可为0。

    document.body.scrollHeight

    IE、Firefox、Opera表现相同,都等于document.body.clientHeight和document.body.offsetHeight,最小可为0。

    Chrome下该值等于HTML 4.01下的document.body.scrollHeight。

    document.documentElement.clientHeight

    各浏览器表现一致,都等于内容可视区域的高度(定义同上),等于HTML 4.01下的document.body.clientHeight值。

    注:指定doctype为<!DOCTYPE HTML>,结果与上述测试相同,即HTML 5延续了XHTML 1.1的一些规范。

    总   结

    要保证浏览器兼容,建议是采用XHTML 1.1,这样便可以使用document.body.clientHeight或document.body.offsetHeight获得页面的实际高度,使用document.documentElement.clientHeight获得内容可视区域的高度。因为HTML 5标准并没有被所有主流浏览器全部支持,所以暂不推荐使用,当然这将是未来的发展趋势。最后,关于doctype的知识建议学习下《用doctype激活浏览器模式》。

    附:上文的两个测试页面—— HTML 4.01测试页面XHTML 1.1测试页面



    本博客所有文章如无特别注明均为原创。
    复制或转载请以超链接形式注明转自枫芸志,原文地址《clientHeight、offsetHeight、scrollHeight对比测试分析
    标签:
    分享:

已经有3 条评论抢在你前面了~

  1. 沙发
    weite 2011年6月24日 下午2:52

    Good!
    Thanks!
    收藏了

    [回复]

  2. 板凳
    zlz 2010年1月4日 下午1:13

    http://www.w3.org/TR/html4/loose.dtd时document.documentElement.clientHeight在IE下有值。
    写个评论真麻烦

    [回复]

  3. 地板
    thebye85 2009年9月15日 上午12:18

    写的太好了,大有收获

    [回复]

无觅相关文章插件,快速提升流量