document.body、document.documentElement和window获取视窗大小的区别
本文共 1962 字，大约阅读时间需要 6 分钟。
来源：
在w3school关于的介绍中，介绍了获取浏览器窗口大小的三种方法（浏览器的视口，不包括工具栏和滚动条）。
对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：
- window.innerHeight – 浏览器窗口的内部高度
- window.innerWidth – 浏览器窗口的内部宽度
对于 Internet Explorer 8、7、6、5：
- document.documentElement.clientHeight
- document.documentElement.clientWidth
或者
- document.body.clientHeight
- document.body.clientWidth
实用的 JavaScript 方案（涵盖所有浏览器）：
1: var w=window.innerWidth
2: || document.documentElement.clientWidth
3: || document.body.clientWidth;
4:
5: var h=window.innerHeight
6: || document.documentElement.clientHeight
7: || document.body.clientHeight;
返回的都是数值，不带单位。这是共同点。好，接下来，看看他们的区别
1:
2:
3:
4:
5:无标题文档
6:
7: .test
8: { 9: width:100px;
10: height:100px;
11: background:red;
12: }
13: #data
14: { 15: width:200px;
16: height:100px;
17: }
18:
19:
20:
21:
22:test
23:
24:
25:
js代码
1: var w=window.innerWidth
2: || document.documentElement.clientWidth
3: || document.body.clientWidth;
4: var h=window.innerHeight
5: || document.documentElement.clientHeight
6: || document.body.clientHeight;
7:
8: var data = document.getElementById('data'); 9: data.innerHTML = "正常文档流情况："+"";
10: data.innerHTML += "w="+w+"";
11: data.innerHTML += "h="+h+"";
12: data.innerHTML += "document.body.clientHeight="+document.body.clientHeight+"";
13: data.innerHTML += "document.body.clientWidth="+document.body.clientWidth+"";
14: data.innerHTML += "window.innerWidth="+window.innerWidth+"";
15: data.innerHTML += "window.innerHeight="+window.innerHeight+"";
16: data.innerHTML += "document.documentElement.clientHeight="+document.documentElement.clientHeight+"";
17: data.innerHTML += "document.documentElement.clientWidth="+document.documentElement.clientWidth+"";
看看结果输出：（ps：电脑分辨率是1366*768）
给.test添加左浮动：float:left，让其脱离正常文档流，看看结果：
除了document.body.clientHeight变成了100，其他基本保持不变。
但是给.data也添加float:left，在对应的浏览器中，document.body.clientHeight变成了0，其他基本保持不变。不信可以自己试试。
关于JavaScript中的*top、*left、*width、*Height详解：
你可能感兴趣的文章
iOS 之NSRange实现小数向上取整
查看>>
PHP 之XML编程，注释总结
查看>>
iOS之SHA1算法
查看>>
iOS之hHTTPS的使用
查看>>
iOS之返回按钮
查看>>
PHP 之smarty、webservice、RSS订阅
查看>>
iOS之http协议
查看>>
iOS之静态库
查看>>
iOS 之适配字体的几中方法
查看>>
iOS之引用外部字体
查看>>
iOS之view的背景绘制渐变色、文字渐变
查看>>
PHP之thinkPHP（一）
查看>>
iOS之UIFont字体设置
查看>>
nodejs理论基础
查看>>
iOS 之iIOS11更新 导航返回按钮偏移的问题。、导航基类
查看>>
iOS pop到navigation栈中的指定控制器
查看>>
iOS NSClassFromString（字符串）自动抓换成类名
查看>>
iOS 键盘右上角完成按钮自定义
查看>>
javascript之（一）
查看>>
javascript之（二）DOM
查看>>