window.innerWidth、document.body.clientWidth和html的大小的区别
首先,我们知道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的大小的区别的更多相关文章
- window.innerWidth和document.body.clientWidth的区别
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- js获取浏览器基本信息:document.body.clientWidth/clientHeight/scrollWidth/scrollTop。(转)
js获取浏览器基本信息:document.body.clientWidth/clientHeight/scrollWidth/scrollTop. 分类: js.jquery.ext.js技术2011 ...
- document.body、document.documentElement和window获取视窗大小的区别
来源:http://www.ido321.com/906.html 在w3school关于window对象的介绍中,介绍了获取浏览器窗口大小的三种方法(浏览器的视口,不包括工具栏和滚动条). 对于In ...
- JS在window和document的应用
页面跳转: window.location.href('地址') window.open('地址', '_self') 打开新窗口: window.open('地址', '_blank') 只显示地址 ...
- document.documentElement.clientWidth
document.documentElement.clientWidth 摘自:http://blog.sina.com.cn/s/blog_6f1f9ead0100n1f6.html 关于获取各种浏 ...
- Window与Document
Window 表示一个包含DOM文档的窗口,其 document 属性指向窗口中载入的 DOM文档.使用 document.defaultView 属性可以获取指定文档所在窗口.window作为全局变 ...
- window、document、html、body、element的事件属性比较
在分析jQuery的事件的时候有提到绑定事件的方式: Dean Edwards的跨浏览器事件绑定使用的方式是 element["on" + type] = handleEvent; ...
- 拉动滚动条追加内容,无限延伸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 ...
- 客户端JavaScript(window、document、element)
一.window对象是所有客户端JavaScript特性和API的主要接入点,用window来引用它. 属性:location属性(引用Location对象,当前显示在窗口的URL).document ...
随机推荐
- 构建Maven聚合工程
最近,准备构建一个Maven的项目,基于模块化的结构思想,决定使用Maven的聚合工程进行构建. 环境准备: (1)eclipse 这里推荐使用spring封装的eclipse(即STS) ,STS中 ...
- MVP模式和MVVM模式
MVP模式 模型-视图-表示器,也就是MVP模式.是mvc模式的一种衍生模式,专注于改进表示逻辑. 与MVC不同,来自view的调用将委托给presenter(表示器),表示器通过接口与view对话. ...
- [转]Redmine 配置163邮箱
redmine的邮件发送功能还是很有用的.像项目有更新啦,任务分配啦,都能邮件发送的相关责任人.我自己在linux服务器上安装并启动了redmine后,邮件一直发送了不了.查了网上的资料,都是讲修改下 ...
- 转自pnljs 委托(Func<int,bool>)
随笔- 147 文章- 0 评论- 16 Func的介绍 经常看到 Func<int, bool>...这样的写法,看到这样的就没有心思看下去了.我们学技术还是需要静下心来. 对Fu ...
- 修改订单的收货时间(MySQL)脚本
需求 下单时间为21:00-23:59,并且收货时间为第二天的订单,将这些订单的收货时间改为第三天: #!/bin/bash ###time:2016-04-26 ###This script is ...
- [C语言]关于struct和typedef struct
在C中定义一个结构体类型要用typedef: *************************************************************************** t ...
- Socket粘包问题
这两天看csdn有一些关于socket粘包,socket缓冲区设置的问题,发现自己不是很清楚,所以查资料了解记录一下: 一两个简单概念长连接与短连接:1.长连接 Client方与Server方先建立通 ...
- arduino编程语言Wiring参考手册API
对Arduino的编程是利用 Arduino编程语言 (基于 Wiring)和Arduino开发环境(based on Processing)来实现的. 通过编程,Arduino可以实现很多种功能. ...
- oracle函数应用
----Oracle中的函数 oracle中函数的分类: --第一种:日期函数 --第二种: 字符函数 --第三种: 数学函数 --第四种: 转换函数 --第五种: 分析函数 ------------ ...
- C++ Primer Plus 笔记记录
(一) /a 这个转移字符竟然能调用计算机的硬件 喇叭~~ 对于float c++只能保证6位有效数字 似乎 double是13位 cout.setf(ios_base::fixed, ios_bas ...