网页尺寸offsetHeight-慕课网

首页课程实战体系课手记专栏慕课教程

网页尺寸offsetHeight

来源：9-20 网页尺寸offsetHeight

慕的地6791964

2017-03-18 13:37

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>

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

写回答关注

1回答

Resen4983: 2017-03-20 11:51:45

已采纳

你是讲两种测试方法都放在一个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>