scrollHeight，clientHeight，offsetHeight在各个浏览器下的区别
以下内容在<!DOCTYPE html>下测试，均为亲测结果~
浏览器版本分别是：IE11、Firefox 53.0.3(64位)、chrome 58.0.3029.110 (64-bit)
测试程序js部分代码：
<style type="text/css">
#one{border:10px solid black; padding:5px; margin:10px;}； /*本次测试是基于左边代码的body标签样式，one是body标签的id*/
</style>
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在各个浏览器下的区别的详细内容，更多请关注其它相关文章！
上一篇： JavaScript如何判断输入为数字类型的方法总结
下一篇： 小程序注册需不需要钱
推荐阅读
-
height/width、offsetheight/offsetwidth、clientheight/clientwidth和scrollheight/scrollwidth的区别
-
scrollHeight，clientHeight，offsetHeight在各个浏览器下的区别
-
scrollHeight，clientHeight，offsetHeight在各个浏览器下的区别
-
解析offsetHeight,clientHeight,scrollHeight之间的区别_javascript技巧
-
解析offsetHeight,clientHeight,scrollHeight之间的区别_javascript技巧