浅谈window、document、html和body的区别
2017-02-14 本文已影响0人
别别扭扭的王姑娘
在学习html的过程中，很多同学都会把window、doucment、 html和body四者混淆，现将四者的区别进行分别阐述:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
#box{
width:100px;
height:100px;
background:aqua;
}
</style>
<script>
window.onload=function(){
//window的高度
var oC=document.documentElement.clientHeight;
alert(oC);
//document的高度
var oBox=document.getElementById("box");
var scrollHeight=document.documentElement.scrollHeight;
oBox.onclick=function(){
alert(oBox.scrollHeight);
};
};
</script>
</head>
<body>
<div id="box"></div>
</body>
</html>
如上例子，我们可以简单理解：
window的意思是窗口，它是指窗口大小的可视高度，不包括浏览器滚动条，
高度为document.documentElement.clientHeight;
document的意思是文档，它是指具体的一个对象的内容高度，高度为对象的document.documentElement.scrollHeight;
在代码里面可以看到，body是包含在html里的，在标准浏览器里面html部分是等于body部分的。
