document.body、document.documentElement和window获取视窗大小的区别 JavaScript

来源：http://www.ido321.com/906.html

在w3school关于window对象的介绍中，介绍了获取浏览器窗口大小的三种方法（浏览器的视口，不包括工具栏和滚动条）。
对于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:

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 = https://www.it610.com/article/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）

document.body、document.documentElement和window获取视窗大小的区别

文章图片

文章图片

给.test添加左浮动：float:left，让其脱离正常文档流，看看结果：

文章图片

文章图片

除了document.body.clientHeight变成了100，其他基本保持不变。
但是给.data也添加float:left，在对应的浏览器中，document.body.clientHeight变成了0，其他基本保持不变。不信可以自己试试。
【document.body、document.documentElement和window获取视窗大小的区别】关于JavaScript中的*top、*left、*width、*Height详解：http://www.ido321.com/911.html