                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /JavaScript进阶篇

网页尺寸offsetHeight

var w= document.documentElement.offsetWidth;

var h= document.documentElement.offsetHeight;

//法一

document.write("方法一"+"<br/>"+"网页内容的宽度为："+w+"<br />"+"网页内容的高度为："+h);

//法二

document.write("<br />"+"方法二"+"<br/>");

document.write("网页内容的宽度为："+document.body.offsetWidth+"<br />");

document.write("网页内容的高度为："+document.body.offsetHeight);

</script>

为什么这两个方法的输出结果不一样》？

慕的地6791964

2017-03-18

源自：JavaScript进阶篇 9-20

关注问题我要回答

736

操作

收起

1 回答

Resen4983 回答被采纳 +3 积分
2017-03-20

你是讲两种测试方法都放在一个demo中的吧,因为document.write的输出结果会占用网页打的内容高度,所以后一个测试中输出的网页的高度会增加两行的行高.你也可以试试在<body></body>增加些内容看看数据变化就知道原因了.

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

</head>
<body>
 <h2>测试网页尺寸</h2>
 <h2>11111111111</h2>
 <h2>数值会随着body标签的内容而改变</h2>
 <script type="text/javascript">
document.write(document.body.offsetHeight+"<br />");
document.write(document.body.offsetWidth+"<br />");
document.write(document.body.offsetHeight+"<br />");
document.write(document.body.offsetWidth+"<br />");
document.write(document.body.offsetHeight+"<br />");
document.write(document.body.offsetWidth+"<br />");
</script>
</body>
</html>