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

来源：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: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

   2: <html xmlns="http://www.w3.org/1999/xhtml">

   3: <head>

   4: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

   5: <title>无标题文档</title>

   6: <style type="text/css">

   7: .test

   8: {

   9:     width:100px;

  10:     height:100px;

  11:     background:red;

  12: }

  13: #data

  14: {

  15:     width:200px;

  16:     height:100px;

  17: }

  18: </style>

  19: </head>

20:

  21: <body>

  22: <div class="test">test</div>

  23: <div id="data"></div>

  24: </body>

  25: </html>

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 = "正常文档流情况："+"<br/>";

  10: data.innerHTML += "w="+w+"<br/>";

  11: data.innerHTML += "h="+h+"<br/>";

  12: data.innerHTML += "document.body.clientHeight="+document.body.clientHeight+"<br/>";

  13: data.innerHTML += "document.body.clientWidth="+document.body.clientWidth+"<br/>";

  14: data.innerHTML += "window.innerWidth="+window.innerWidth+"<br/>";

  15: data.innerHTML += "window.innerHeight="+window.innerHeight+"<br/>";

  16: data.innerHTML += "document.documentElement.clientHeight="+document.documentElement.clientHeight+"<br/>";

  17: data.innerHTML += "document.documentElement.clientWidth="+document.documentElement.clientWidth+"<br/>";

看看结果输出：（ps：电脑分辨率是1366*768）

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

除了document.body.clientHeight变成了100，其他基本保持不变。

但是给.data也添加float:left，在对应的浏览器中，document.body.clientHeight变成了0，其他基本保持不变。不信可以自己试试。

关于JavaScript中的*top、*left、*width、*Height详解：http://www.ido321.com/911.html

转载于:https://www.cnblogs.com/ido321/p/4005466.html

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

jQuery-$（document）.ready和$（window）.load有什么区别？
本文翻译自:jQuery - What are differences between $(document).ready and $(window).load? What are differenc ...
用$(document).on(‘click‘,‘.dete‘.function(e){})获取到元素本身
用$(document).on('click','.dete'.function(e){})获取到元素本身我在项目中用这个更多的是因为要监听动态创建元素,还有要监听到元素本身,我一开始用e.targ ...
document.referrer和history.go(-1)退回上一页区别
javascript:location=document.referrer;和javascript:history.go(-1);区别: 返回上一页,在PC端我们可以使用:history.go(-1) ...
window 获取文件大小
window 获取文件大小要获取文件大小,可以使用以下代码: import os# 文件路径 file_path = "example.txt"# 获取文件大小(单位为字节) f ...
window 获取文件md5值dos 脚本
window 获取文件md5值dos 脚本将下面脚本内容写入md5sum.bat中: @echo offrem path: %UserProfile%\AppData\Roaming\Microso ...
JS获取网页大小和鼠标当前坐标
JS获取网页大小和鼠标当前坐标 var s = ""; s += "/r/n网页可见区域宽:"+ document.body.clientWidth; s += ...
用 Javascript 获取页面大小、窗口大小和滚动条位置
一,window对象的属性scrollMaxX,scrollMaxY: 传回的是可卷动的最大长度,其值为整数,单位为像素.限Firefox使用. 文件的全宽 = innerWidth + scroll ...
使用jQuery获取视口大小
本文翻译自:Using jQuery To Get Size of Viewport How do I use jQuery to determine the size of the browser ...
前端js获取图片大小扩展名_前端获取图片存储大小的方法
1利用input元素获取如果是input元素 var file=document.getElementById('myinput'); var fileData = file.files[0]; v ...

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

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

最新文章

热门文章