首页 > web前端 > js教程 > 正文

scrollHeight,clientHeight,offsetHeight在各个浏览器下的区别

巴扎黑
发布: 2017-06-26 15:15:14
原创
1771 人浏览过

document.body是DOM中Document对象里的body节点, document.documentElement是文档对象根节点(html)的引用。

以下内容在下测试,均为亲测结果~

浏览器版本分别是:IE11、Firefox 53.0.3(64位)、chrome 58.0.3029.110 (64-bit) 

测试程序js部分代码:

1.document.documentElement.scrollHeight与document.body.scrollHeight比较

IE浏览器下:

      h1=document.documentElement.scrollHeight;   //html标签下内容的实际高度,包括body标签的border,margin,padding;

      h2=document.body.scrollHeight;                     //body标签下包括padding在内的样式实际高度,不包括body标签的border,margin;

       计算结果:h1=h2+上下border(body的边框)+上下margin(body的内边距);

Firefox浏览器下:

      h1= document.documentElement.scrollHeight;  //html标签下内容的实际高度,包括body标签的border,margin,padding;

      h2=document.body.scrollHeight;                    //body标签下包括padding在内的样式实际高度,不包括body标签的border,margin;

     计算结果: h1=h2+上下border(body的边框)+上下margin(body的内边距);

 //  Firefox浏览器与IE浏览器两种情况下计算方法均相同,Chrome浏览器的计算方式有点差别

Chrome浏览器下:

      h1=document.documentElement.scrollHeight;      //html标签下内容的实际高度,包括body标签的border,margin,padding;

      h2=document.body.scrollHeight;                         

     计算结果:h1=h2;

 

 2.document.documentElement.clientHeight与document.body.clientHeight比较 

IE浏览器下:

      h3=document.documentElement.clientHeight;   //网页内容可见部分的高度,随着浏览器窗口大小的变化而变化

      h4=document.body.clientHeight;                     //body标签下内容的实际高度,包括body标签的padding,不包括body标签的border,margin,;     

        

Firefox浏览器下:

      h3= document.documentElement.clientHeight;   //网页内容可见部分的高度,随着浏览器窗口大小的变化而变化

      h4=document.body.clientHeight;                      //body标签下内容的实际高度,包括body标签的padding,不包括body标签的border,margin,;  

   

 //  Firefox浏览器与IE浏览器两种情况下计算方法均相同,Chrome浏览器的计算方式有点差别

Chrome浏览器下:

      h3=document.documentElement.clientHeight;      //网页内容可见部分的高度,随着浏览器窗口大小的变化而变化 

      h4=document.body.clientHeight;                        //body标签下内容的实际高度,包括body标签的padding,不包括body标签的border,margin,;    

    

3.document.documentElement.offsetHeight与document.body.offsetHeight比较 

  

IE浏览器下:

      h5=document.documentElement.offsetHeight;   //html标签下内容的实际高度,包括body标签的border,margin,padding;

      h6=document.body.offsetHeight;                     //body标签下内容的实际高度,包括body标签的border,padding,不包括margin;   

        计算结果:h5=h6+margin(body标签的);

Firefox浏览器下:

      h5= document.documentElement.offsetHeight;   //html标签下内容的实际高度,包括body标签的border,margin,padding;

      h6=document.body.offsetHeight;                      //body标签下内容的实际高度,包括body标签的border,padding,不包括margin;

     计算结果:h5=h6+margin(body标签的);

 //  Firefox浏览器与IE浏览器两种情况下计算方法均相同,Chrome浏览器的计算方式有点差别

Chrome浏览器下:

      h5=document.documentElement.offsetHeight;      //html标签下内容的实际高度,包括body标签的border,margin,padding;

      h6=document.body.offsetHeight;                        //body标签下内容的实际高度,包括body标签的border,padding,不包括margin;  

    计算结果:h5=h6+margin(body标签的);

以上三个浏览器,当body标签的margin为0时,h5=h6;

 

以上是scrollHeight,clientHeight,offsetHeight在各个浏览器下的区别的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板