来源：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. 开始Admob广告盈利模式详细教程

    例子工程源码下载地址:     下载源代码               当然,我也参考了一些网上的资料,主要有: AdMob:在android应用中嵌入广告的方案        如何在Android ...

  2. Selenium2+python自动化39-关于面试的题

    前言 最近看到群里有小伙伴贴出一组面试题,最近又是跳槽黄金季节,小编忍不住抽出一点时间总结了下, 回答不妥的地方欢迎各位高手拍砖指点.   一.selenium中如何判断元素是否存在? 首先selen ...

  3. 配置quartz数据源的三种方式

    如果是使用了JDBC JobStore或JobStoreCMT获得持久的Job时,就要配置相关的数据源了. 方式一:使用quartz.properties文件,这时只需要在property文件中增加如 ...

  4. 关于mysql的wait_timeout参数 设置不生效的问题

    关于wait_timeout 有一次去online set wait_timeout 的时候发现改了不生效,如下: mysql> show variables like 'wait_timeou ...

  5. 安卓5.1/7.1/8.1+wifi有叉问题解决

    7.1/8.1 adb shell "settings put global captive_portal_http_url http://captive.v2ex.co/generate_ ...

  6. 使用StringBuilder或StringBuffer简单优化

    使用StringBuilder或StringBuffer // join(["a", "b", "c"]) -> "a an ...

  7. OpenShift 项目的备份和恢复实验

    本测试记录从openshift 3.6环境中导出项目,然后在将项目环境恢复到Openshift 3.11中所需要的步骤 从而指导导入导出的升级过程. 1.安装Openshift 3.6版本 过程略 2 ...

  8. Vue Cli安装以及使用

      因为公司项目要用vue框架,所以会用vue-cli来新建项目.用过vue的都知道,要全局安装vue以及脚手架vue-cli,然后执行vue init webpack projectname来新建v ...

  9. SQL Server中的database checkpoint

    基于性能方面的考虑, 数据库引擎会在内存(buffer cache)中执行数据库数据页(pages)的修改, 不会再每次做完修改之后都把修改了的page写回到磁盘上. 更准确的说, 数据库引擎定期在每 ...

  10. 在CentOS 7上使用Yum源安装和卸载 MongoDB 3.4

    在CentOS 7上使用Yum源安装和卸载 MongoDB 3.4 1.配置Yum源 vim /etc/yum.repos.d/mongodb-org-3.4.repo [mongodb-org-3. ...