为什么两种方法同一浏览器同一运行环境，结果不一样

源自：9-19 网页尺寸scrollHeight

为什么两种方法同一浏览器同一运行环境，结果不一样

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

</head>

<body>

<script type="text/javascript">

document.write("方法一："+"<br>"+"实际高度："+document.body.scrollHeight+" "+"实际宽度："+document.body.scrollWidth+"<br>");

document.write("方法二："+"<br>"+"实际高度："+document.documentElement.scrollHeight+" "+"实际宽度："+document.documentElement.scrollWidth);

</script>

</body>

</html>

提问者：漩涡鸣人007 2016-03-15 10:09

个回答

小丫爱学H5

2016-03-15 20:06:10

已采纳

document.body和document.documentElement比较：
     document.body是DOM中Document对象里的body节点， document.documentElement是文档对象根节点(html)的引用。
     IE在怪异模型（quick mode）下document.documentElement无法正确取到clietHeight scrollHeight等值，比如clietHeight=0。可以见IE的怪异模型并没有把html作为盒子模型的一部分，好在现在很少使用怪异模型。（注：如果页面没写DTD或写的不对，IE6默认使用怪异模型解析页面）
document.body.scrollHeight和document.documentElement.scrollHeight的区别：
     document.body.scrollHeight是body元素的滚动高度，document.documentElement.scrollHeight为页面的滚动高度，且 document.documentElement.scrollHeight在IE和Firefox下还有点小差异。
     IE : document.documentElement.scrollHeight = document.body.scrollHeight + marginTop bottom高度 + 上下border宽度
     firefox : document.documentElement.scrollHeight = document.body.scrollHeight + marginTop bottom高度

3