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

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

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

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

  2. window.innerWidth、document.body.clientWidth和html的大小的区别

    首先,我们知道document.body指向的就是body元素,如此,我们就可以以document.body来获取body的大小.何以知之?如下代码: var body = document.quer ...

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

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

  4. javascript中window与document对象、setInterval与setTimeout定时器的用法与区别

    一.写在前面 本人前端菜鸟一枚,学习前端不久,学习过程中有很多概念.定义在使用时容易混淆,在此给向我一样刚踏入前端之门的童鞋们归纳一下.今天给大家分享一下js中window与document对象.se ...

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

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

  6. document.referrer和history.go(-1)退回上一页区别

    javascript:location=document.referrer;和javascript:history.go(-1);区别: 返回上一页,在PC端我们可以使用:history.go(-1) ...

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

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

  8. document.getElementById & document.querySelector

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

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

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

随机推荐

  1. 安装eclipse for JavaEE 后的一些设置

    以下的设置是相对于一个workspace而设置的,如果更换了workspace则要重新设置. 1. 设置Text Editors: 2. 设置Content Assist 的快捷键(比较方便) 3. ...

  2. 计算XX年的某月某日是当年的第多少天？是星期几？

    /** * 编写程序,计算2013年的某月某日是当年的第多少天?是星期几?已知2013年元旦是星期二. */ import java.util.Scanner; public class Date { ...

  3. Android：调试之DDMS

    DDMS 的全称是Dalvik Debug Monitor Service,是 Android 开发环境中的Dalvik虚拟机调试监控服务. 在Eclipse,项目启动了虚拟器后,右上角选择Open ...

  4. ASP.NET获取路径的方法

    原文:[转载]ASP.NET获取路径的方法 HttpContext.Current.Request.PhysicalPath;    // 获得当前页面的完整物理路径.比如 F:\XFU.NSQS\p ...

  5. 腾讯大讲堂ppt全集

    腾讯大讲堂ppt全集 腾讯大讲堂ppt全集资料下载 腾讯大讲堂ppt1-62资料下载 最新最全的腾讯大讲堂ppt全集 腾讯大讲堂ppt全集资料下载 腾讯大讲堂ppt1-62资料下载地址 http:// ...

  6. 在Hadoop伪分布式模式下安装Hive(derby,mysql)

    我的Hadoop版本是1.2.0,mysql版本是5.6.12. 先介绍一下嵌入式derby模式: 1.下载/解压 在hive官网上选择要下载的版本,我选择的版本是hive-0.10.0. 下载好解压 ...

  7. sqort函数用法总结

    qsort包含在<stdlib.h>头文件中,此函数根据你给的比较条件进行快速排序,通过指针移动实现排序.排序之后的结果仍然放在原数组中.使用qsort函数必须自己写一个比较函数. 函数原 ...

  8. arcgis engine 开发之QI

    ArcGIS Engine开发基础之QI AO开发中QI(接口查询)非常重要,从某种意义上说不会QI就不会做AO开发. 在讲ArcGIS Engine开发QI实例操作之前,以一个现实生活例子以方便大家 ...

  9. apk反编译(3)smali语法

    from http://pallergabor.uw.hu/androidblog/dalvik_opcodes.html Dalvik opcodes Author: Gabor Paller Vx ...

  10. git push --no-thin

    有时候我们执行 git push 将一个 new branch 推送到远程仓库的时候,会被远程仓库阻止. 可能是我们没有相应的权限吧.然而,我在 git push 的时候加上 --no-thin 参数 ...