《测试1 body里没有任何内容》
测试前提:body里面没有任何内容
我们通过测试得知 window 和document的宽度都是一样的。都为1920 而body的宽度 是document的宽度减去body外边距的宽度。所以1920-8*2=1904 所以body的宽度为1904
<html>
<head>
<title></title>
<script src="jquery-1.11.2.js"></script>
</head>
<body>
</body>
</html>
<script type="text/javascript">
alert("window的宽度为:" + $(window).width()); //打印出:window的宽度为:1920 【注:我的屏幕分辨率是:1920*1080】
alert("document的宽度为:" + $(document).width()); //打印出:document的宽度为:1920
alert("boyd的宽度为:" + $("body").width()); //打印出:boyd的宽度为:1904 【查看CSS 发现 body的margin:8px】
alert("window的高度为:" + $(window).height()); //打印出:window的高度为:954
alert("document的高度为:" + $(document).height()); //打印出:document的高度为:954
alert("boyd的高度为:" + $("body").height()); //打印出:boyd的高度为:0
</script>
《测试2, 在body里放100个DIV 》
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="jquery-1.11.2.js"></script>
<style type="text/css">
div {
width:100px;
height:18px;
}
body {
margin:8px;
padding:0px;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
<script type="text/javascript">
//1903+17=1920
alert("window的宽度为:" + $(window).width()); //打印出:window的宽度为:1903 【注:我的屏幕分辨率是:1920*1080;此时浏览器滚动条的宽度为17px】
//1903+17=1920
alert("document的宽度为:" + $(document).width()); //打印出:document的宽度为:1903
//1887+8*2+17=1920
alert("boyd的宽度为:" + $("body").width()); //打印出:boyd的宽度为:1887 【查看CSS 发现 body的margin:8px, padding为0px;此时浏览器滚动条的宽度为17px】
alert("div的宽度为:" + $("div").width()); //打印出:div的宽度为:100 【style里面将div的宽度设定为100px,高度设为18px】
//测试1里已经展示这个954是怎么来的了。
alert("window的高度为:" + $(window).height()); //打印出:window的高度为:954
//18*100+8*2=1816
alert("document的高度为:" + $(document).height()); //打印出:document的高度为:1816 【div在高度为18px ,页面上有100个div;body的margin:8px】
//18*100=1800;
alert("boyd的高度为:" + $("body").height()); //打印出:boyd的高度为:1800 【div在高度为18px ,页面上有100个div】
alert("div的高度为:" + $("div").height()); //打印出:div的高度为:18
//通过上面的值得出:window与document值的区别是window表示当前视窗。而document表示当前文档;
</script>