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

浏览器兼容性的两种方法得到网页内容宽度和高度的值不同？

两种用法得到的数值是不一样的：

document.documentElement.offsetHeight;
document.body.offsetHeight;

为什么呢？

俯仰2015

2016-11-20

源自：JavaScript进阶篇 9-20

关注问题我要回答

1408

操作

收起

3 回答

神灯君3598408 回答被采纳 +3 积分
2016-11-21

document.documentElement指的是html标签

document.body指的是body标签

你的两个高宽不一样，是你的margin与panding没有清零；

你可以尝试一下。

alert(document.body.offsetWidth);
alert(document.documentElement.offsetWidth);

*{
		margin:0;
		padding: 0;
	}

1 回复有任何疑惑可以回复我~

收起回答

俯仰2015 提问者

我试了下好像还不行，你能把完整的代码贴出来吗？

2016-11-22 回复有任何疑惑可以回复我~

俯仰2015 提问者

非常感谢！

2016-11-29 回复有任何疑惑可以回复我~

无穷敏
2016-11-24

清零之后还是不一样，好奇怪。。。。求解

294px;0px;
294px;18px;

<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<style type="text/css">
    *{padding:0 ;margin:0;}
</style>
</head>
<body>

 <script type="text/javascript">
document.write(document.documentElement.offsetWidth+"px;"+document.documentElement.offsetHeight+"px;<br/>")
document.write(document.body.offsetWidth+"px;"+document.body.offsetHeight+"px;")
</script>
</body>
</html>

1 回复有任何疑惑可以回复我~

收起回答

俯仰2015 提问者

是的，我也是这样

2016-11-24 回复有任何疑惑可以回复我~