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

var body = document.querySelector('body');
console.log(body == document.body);

  结果显示的是true。

  同样的document.documentElement指向的是html元素。

  html代码如下:

<div id = 'div' style = 'width:200px;height: 200px;background: red;'>
</div>

  如图效果:

 1.获取html的大小

  如下代码:

var html = document.querySelector('html');
// 获取html元素的宽度
console.log("html-width:" +document.defaultView.getComputedStyle(html,null).width);
// 获取html元素的高度
console.log("html-height:" + document.defaultView.getComputedStyle(html,null).height);

  结果显示:html-width:1366px,html-height:216px

 2.获取body的大小

  代码如下:

console.log("clientWidth:" + document.body.clientWidth);
console.log("clientHeight:" + document.body.clientHeight);

  结果显示:body-width:1350px,clientHeight:200。

3.使用能够window.innerWidth获取

  代码如下:

console.log("innerWidth:" + window.innerWidth);
console.log('innerHeight:' + window.innerHeight);

  结果显示:innerWidth:1366,innerHeight:608

   从以上的实验,可以知道,使用window.innerWidth/window.innerHeight获得的绝非是有些人所说的html的大小。

  首先从width来看,为什么可见window.innerWidth和html的宽度是相等的。但是问什么body的width却是比二者都小呢?

其实答案很简单,因为body天生就有margin,不信的话,我们把body染色,代码如下:

html.style.backgroundColor = 'white';
body.style.backgroundColor = 'red';

  之所以第一行给了html的背景色。其深入原因请见张大神的对html与body的一些研究与理解。效果如图:

  body的margin未修改:

  body的margin修改后:

  那么滚动条是否会对三者的宽度有什么影响呢?

  假如我们使浏览器增加一个垂直的滚动条。

  三者的宽度如下(此时body的margin为0):

    html-width:1349px,body-width:1349px,innerWidth:1366。

可见html是不把滚动条的宽度算在内的。而innerWidth是把滚动条的宽度算在内的。

  然后我们再来看height的大小。首先是不出现滚动条的情况(为便于实验,此时body的margin设置为0)。

html-height:200px,body-height:200px,innerHeight:608

这种情况下,html和body的高度是一致的,就是我们所设置的div的高度。而innerHeight则是不一致的。高了很多。

  而当出现滚动条的时候(将div的高度设置为2000px,结果如下:

html-height:2000px,body-height:2000px,innerHeight:608。此时可以看到,html和body的高度会随之改变,但是innerHeight依旧没有改变。

总结

  最后我们就知道了,一般情况下,html和body的宽高都是相等的,除非是body的margin的影响。其宽高不包括滚动条。而innerHeight和innerWidth代表的永远是窗口的大小,窗口变大,他们的值就会变大,窗口变小,他们的值也就会变小,而且它的值包括滚动条的宽度,有可能比body和html的值大,也可能小。完全在于body中的元素的尺寸。所以在我看来,因为innerWidth存在兼容性问题,所以无法有个方法能够兼容所有浏览器获得窗口的大小,主要是窗口的高度不能够获得。

window.innerWidth、document.body.clientWidth和html的大小的区别的更多相关文章

  1. window.innerWidth和document.body.clientWidth的区别

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. js获取浏览器基本信息:document.body.clientWidth/clientHeight/scrollWidth/scrollTop。(转)

    js获取浏览器基本信息:document.body.clientWidth/clientHeight/scrollWidth/scrollTop. 分类: js.jquery.ext.js技术2011 ...

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

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

  4. JS在window和document的应用

    页面跳转: window.location.href('地址') window.open('地址', '_self') 打开新窗口: window.open('地址', '_blank') 只显示地址 ...

  5. document.documentElement.clientWidth

    document.documentElement.clientWidth 摘自:http://blog.sina.com.cn/s/blog_6f1f9ead0100n1f6.html 关于获取各种浏 ...

  6. Window与Document

    Window 表示一个包含DOM文档的窗口,其 document 属性指向窗口中载入的 DOM文档.使用 document.defaultView 属性可以获取指定文档所在窗口.window作为全局变 ...

  7. window、document、html、body、element的事件属性比较

    在分析jQuery的事件的时候有提到绑定事件的方式: Dean Edwards的跨浏览器事件绑定使用的方式是 element["on" + type] = handleEvent; ...

  8. 拉动滚动条追加内容,无限延伸document高度 $(window).scroll(function(){if($(window).scrollTop() + $(window).height() == $(document).height()) { $("body").append(html) } })

    $(document).ready(function() { // endless scrolling $(window).scroll(function() { if($(window).scrol ...

  9. 客户端JavaScript(window、document、element)

    一.window对象是所有客户端JavaScript特性和API的主要接入点,用window来引用它. 属性:location属性(引用Location对象,当前显示在窗口的URL).document ...

随机推荐

  1. 构建Maven聚合工程

    最近,准备构建一个Maven的项目,基于模块化的结构思想,决定使用Maven的聚合工程进行构建. 环境准备: (1)eclipse 这里推荐使用spring封装的eclipse(即STS) ,STS中 ...

  2. MVP模式和MVVM模式

    MVP模式 模型-视图-表示器,也就是MVP模式.是mvc模式的一种衍生模式,专注于改进表示逻辑. 与MVC不同,来自view的调用将委托给presenter(表示器),表示器通过接口与view对话. ...

  3. [转]Redmine 配置163邮箱

    redmine的邮件发送功能还是很有用的.像项目有更新啦,任务分配啦,都能邮件发送的相关责任人.我自己在linux服务器上安装并启动了redmine后,邮件一直发送了不了.查了网上的资料,都是讲修改下 ...

  4. 转自pnljs 委托(Func<int,bool>)

    随笔- 147 文章- 0 评论- 16 Func的介绍   经常看到  Func<int, bool>...这样的写法,看到这样的就没有心思看下去了.我们学技术还是需要静下心来. 对Fu ...

  5. 修改订单的收货时间(MySQL)脚本

    需求 下单时间为21:00-23:59,并且收货时间为第二天的订单,将这些订单的收货时间改为第三天: #!/bin/bash ###time:2016-04-26 ###This script is ...

  6. [C语言]关于struct和typedef struct

    在C中定义一个结构体类型要用typedef: *************************************************************************** t ...

  7. Socket粘包问题

    这两天看csdn有一些关于socket粘包,socket缓冲区设置的问题,发现自己不是很清楚,所以查资料了解记录一下: 一两个简单概念长连接与短连接:1.长连接 Client方与Server方先建立通 ...

  8. arduino编程语言Wiring参考手册API

    对Arduino的编程是利用 Arduino编程语言 (基于 Wiring)和Arduino开发环境(based on Processing)来实现的. 通过编程,Arduino可以实现很多种功能. ...

  9. oracle函数应用

    ----Oracle中的函数 oracle中函数的分类: --第一种:日期函数 --第二种: 字符函数 --第三种: 数学函数 --第四种: 转换函数 --第五种: 分析函数 ------------ ...

  10. C++ Primer Plus 笔记记录

    (一) /a 这个转移字符竟然能调用计算机的硬件 喇叭~~ 对于float c++只能保证6位有效数字 似乎 double是13位 cout.setf(ios_base::fixed, ios_bas ...