博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
document.body、document.documentElement和window获取视窗大小的差别
阅读量:5330 次
发布时间:2019-06-14

本文共 2030 字,大约阅读时间需要 6 分钟。

来源:

在w3school关于的介绍中,介绍了获取浏览器窗体大小的三种方法(浏览器的视口,不包含工具栏和滚动栏)。

对于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: 
2: 
3: 
4: 
5: 无标题文档
6: 
7: .test
8: {
9:     width:100px;
10:     height:100px;
11:     background:red;
12: }
13: #data
14: {
15:     width:200px;
16:     height:100px;
17: }
18: 
19: 
20:
21: 
22: 
test
23: 
24: 
25: 

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 = "正常文档流情况:"+"
";
10: data.innerHTML += "w="+w+"
";
11: data.innerHTML += "h="+h+"
";
12: data.innerHTML += "document.body.clientHeight="+document.body.clientHeight+"
";
13: data.innerHTML += "document.body.clientWidth="+document.body.clientWidth+"
";
14: data.innerHTML += "window.innerWidth="+window.innerWidth+"
";
15: data.innerHTML += "window.innerHeight="+window.innerHeight+"
";
16: data.innerHTML += "document.documentElement.clientHeight="+document.documentElement.clientHeight+"
";
17: data.innerHTML += "document.documentElement.clientWidth="+document.documentElement.clientWidth+"
";

看看结果输出:(ps:电脑分辨率是1366*768)

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

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

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

关于JavaScript中的*top、*left、*width、*Height具体解释:

转载于:https://www.cnblogs.com/gcczhongduan/p/5352695.html

你可能感兴趣的文章
Spring Bean InitializingBean和DisposableBean实例
查看>>
Solr4.8.0源码分析(5)之查询流程分析总述
查看>>
[Windows Server]安装系统显示“缺少计算机所需的介质驱动程序”解决方案
查看>>
[容斥][dp][快速幂] Jzoj P5862 孤独
查看>>
Lucene 学习之二:数值类型的索引和范围查询分析
查看>>
软件开发工作模型
查看>>
Java基础之字符串匹配大全
查看>>
面向对象
查看>>
lintcode83- Single Number II- midium
查看>>
移动端 响应式、自适应、适配 实现方法分析(和其他基础知识拓展)
查看>>
selenium-窗口切换
查看>>
使用vue的v-model自定义 checkbox组件
查看>>
[工具] Sublime Text 使用指南
查看>>
Hangfire在ASP.NET CORE中的简单实现方法
查看>>
Algorithm——何为算法?
查看>>
Web服务器的原理
查看>>
小强升职计读书笔记
查看>>
常用的107条Javascript
查看>>
#10015 灯泡(无向图连通性+二分)
查看>>
elasticsearch 集群
查看>>