来源：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）

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMTA0Mzg0Mw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMTA0Mzg0Mw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">

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

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMTA0Mzg0Mw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">

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

可是给.data也加入float:left，在相应的浏览器中，document.body.clientHeight变成了0。其它基本保持不变。不信能够自己试试。

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

document.body、document.documentElement和window获取视窗大小的差别的更多相关文章

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

    来源:http://www.ido321.com/906.html 在w3school关于window对象的介绍中,介绍了获取浏览器窗口大小的三种方法(浏览器的视口,不包括工具栏和滚动条). 对于In ...

  2. document.body / document.ducumentElement /等获取高度和宽度的区别

    document.body / document.ducumentElement /等获取高度和宽度的区别 <!DOCTYPE html> <html> <head la ...

  3. document.referrer的使用和window.opener 跟 window.parent 的区别

    偶尔看到了document.referrer,之前一直有点疑惑与window.opener 和 window.parent之间的区别 首先查了一下w3cSCHOOL, 上面的解释:referrer 属 ...

  4. js 原生 document.querySelectorAll document.getElementsByTagName document.querySelector document.getElementById的区别

    1.querySelector只返回匹配的第一个元素,如果没有匹配项,返回null.  2.querySelectorAll返回匹配的元素集合,如果没有匹配项,返回空的nodelist(节点数组). ...

  5. document.getElementById & document.querySelector

    document.getElementById & document.querySelector https://developer.mozilla.org/en-US/docs/Web/AP ...

  6. 用 Javascript 获取页面大小、窗口大小和滚动条位置

    页面大小.窗口大小和滚动条位置这三个数值在不同的浏览器例如 Firefox 和 IE 中有着不同的实现.即使在同一种浏览器例如 IE 中,不同版本也有不同的实现. 本文给出两个能兼容目前所有浏览器的 ...

  7. js 获取浏览器大小，屏幕大小等。

    转自:“”http://www.cnblogs.com/top5/archive/2009/05/07/1452135.html“”..感谢,万分. 网页可见区域宽:document.body.cli ...

  8. js获取屏幕大小

    1.js获取屏幕大小 <html> <script> function a(){ document.write( "屏幕分辨率为:"+screen.widt ...

  9. Android获取屏幕大小和设置无标题栏

    android获取屏幕大小非常常用,例如写个程序,如果要做成通用性很强的程序,适用屏幕很强,一般布局的时候都是根据屏幕的长宽来定义的,所以我把这个总结一下,方便日后忘记的时候查阅.还有就是有时候写程序 ...

随机推荐

  1. 2. python 字符串常量

    2. python 字符串常量 1.单双引号字符串是一样的 >>> 'abc',"abc"    ('abc', 'abc')    >>> 当 ...

  2. MSI failed, 不能卸载VMware

    解决方法; http://kb.vmware.com/selfservice/microsites/search.do?language=en_US&cmd=displayKC&ext ...

  3. Fine Uploader + Spring3.2.2(Java+html5上传) SpringMVC+jquery-fineuploader 文件上传

    需求:要实现多文件上传,且要支持手机等移动设备... springmvc文件上传真头疼,网上搜了半天没发现都是TMD的用submit按钮提交到后台的,就没有插件的吗?最后发现了fineUploader ...

  4. tomcat启动时间修改

    Server Tomcat v6.0 Server at localhost was unable to start within 45 seconds. If the server requires ...

  5. maven项目如何生成war文件

    配置 你的pom.xml文件,在你的overview视窗里 配置 packaging为 war 然后然后点击 pom.xml右键,run as 选择 install 或是 package如果项目没问题 ...

  6. plsql调用无参/有参存储过程

    --有参调用方式:declare STERMINAL ); SPROCESS NUMBER; begin sj_transfera_digi_getmapping(,,'DYH010006783031 ...

  7. 解决谷歌google不能访问造成wordpress打开缓慢的问题

    近日谷歌又不能访问了,开始没觉得有什么问题.对于技术控的我一直以来谷歌搜索是我的必备工具,这次似乎和往常不太一样,好几天了还是不能访问,通过修改hosts等办法还是没用,只有FQ出去才能访问,但总不能 ...

  8. pat 1060 比较科学计数法

    trick: 1.前导0 如:000001,000.000001 2.出现0时也要按照科学计数法输出 e.g. 4 00000.00000 0001 NO 0.0000*10^0 0.1*10^1 3 ...

  9. linux CentOS7 安装spark

    上次安装了scala-2.11.8,这次安装spark-2.1.0版本 1.下载spark-2.1.0 打开terminal 进入当前用户目录 /home/sks wget http://d3kbcq ...

  10. Ubuntu16.04下Neo4j图数据库官网安装部署步骤（图文详解）（博主推荐）

    不多说,直接上干货! 说在前面的话  首先,查看下你的操作系统的版本. root@zhouls-virtual-machine:~# cat /etc/issue Ubuntu LTS \n \l r ...