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

简介: 在w3school关于window对象的介绍中,介绍了获取浏览器窗口大小的三种方法(浏览器的视口,不包括工具栏和滚动条)。 对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari: window.innerHeight – 浏览器窗口的内部高度window.innerWidth – 浏览器窗口的内部宽度对于 Internet Exp

在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 = "正常文档流情况:"+"
"
;
  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 前端开发 API
core-js介绍及安装使用
core-js介绍及安装使用
core-js介绍及安装使用
|
3月前
|
JavaScript Unix Linux
nvm与node.js的安装指南
通过以上步骤,你可以在各种操作系统上成功安装NVM和Node.js,从而在不同的项目中灵活切换Node.js版本。这种灵活性对于管理不同项目的环境依赖而言是非常重要的。
797 11
|
11月前
|
存储 缓存 监控
利用 Redis 缓存特性避免缓存穿透的策略与方法
【10月更文挑战第23天】通过以上对利用 Redis 缓存特性避免缓存穿透的详细阐述,我们对这一策略有了更深入的理解。在实际应用中,我们需要根据具体情况灵活运用这些方法,并结合其他技术手段,共同保障系统的稳定和高效运行。同时,要不断关注 Redis 缓存特性的发展和变化,及时调整策略,以应对不断出现的新挑战。
178 10
|
11月前
|
缓存 JavaScript
Vue加载网络组件(远程组件)
【10月更文挑战第23天】在 Vue 中实现加载网络组件(远程组件)可以通过多种方式来完成。
通过patch-package创建补丁修改node_modules依赖下的源码
通过patch-package创建补丁修改node_modules依赖下的源码
393 0
|
弹性计算 数据可视化 应用服务中间件
2024年阿里云服务器2核2G配置有什么优惠?可选实例规格及优惠价格参考
阿里云服务器2核2G配置多少钱?可选实例规格有哪些?2024年的优惠价格是多少?根据阿里云2024年的收费标准及活动价格来看,2核2G配置轻量应用服务器的最优惠的价格是61元1年,云服务器2核2G配置的价格为99元1年。阿里云服务器2核2G配置可选的规格有4个,不同实例的价格有所不同,下面是2核2G配置可选实例规格详解及优惠价格表。
2024年阿里云服务器2核2G配置有什么优惠?可选实例规格及优惠价格参考
|
机器学习/深度学习 数据采集 自然语言处理
【传知代码】BERT论文解读及情感分类实战-论文复现
本文介绍了BERT模型的架构和技术细节,包括双向编码器、预训练任务(掩码语言模型和下一句预测)以及模型微调。文章还提供了使用BERT在IMDB数据集上进行情感分类的实战,包括数据集处理、模型训练和评估,测试集准确率超过93%。BERT是基于Transformer的预训练模型,适用于多种NLP任务。在实践中,BERT模型加载预训练权重,对输入数据进行预处理,然后通过微调适应情感分类任务。
964 0
【传知代码】BERT论文解读及情感分类实战-论文复现
|
C++
VS Code 如何设置大小写转换快捷键
VS Code 如何设置大小写转换快捷键
1738 0
VS Code 如何设置大小写转换快捷键
|
JSON JavaScript 前端开发
【面试题】JS判断两个数组相等的4类方法
【面试题】JS判断两个数组相等的4类方法
440 0
|
运维 算法 程序员
程序员去国企:长城资产IT岗位秋招面试记录
【2月更文挑战第7天】本文介绍2024届秋招中,中国长城资产管理股份有限公司的信息技术岗岗位一面的面试基本情况、提问问题等~
265 8