JavaScript中的innerWidth和innerHeight的详解-js教程-PHP中文网

首页

web前端

js教程

JavaScript中的innerWidth和innerHeight的详解

黄舟

Oct 12, 2017 am 10:50 AM

javascript

下面小编就为大家带来一篇浅谈JavaScript的innerWidth与innerHeight。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧

innerWidth与innerHeight属性

说明：window对象的只读属性,声明了窗口的文档显示区的高度和宽度，以像素(px)为计量单位。 (注意：这里的宽度和高度不包括菜单栏、工具栏以及滚动条等的高度)

下面便对这两个属性进行验证：

屏幕分辨率为：1920x1080 浏览器：QQ浏览器(内核是Chrome) 代码如下：

var width=window.innerWidth,height=window.innerHeight; //分别定义width和height接收窗口的高和宽

alert(width); //窗口的宽度 1920px

alert(height); 　　//窗口的高度 950px

innerWidth因为浏览器两旁没有遮挡物,所以完美的得到了屏幕的宽度1920,而innerHeight因为浏览器上面有工具栏,显示屏又有任务栏,所以被挤掉了130px

这次博主依次干掉了任务栏(其实就是隐藏了)和工具栏中的标签页并按下F12加上了开发者选项再次进行测试：

/*————————干掉任务栏后————————*/
  var width=window.innerWidth,height=window.innerHeight;  
  alert(width);  //宽度没有变化,还是1920px
  alert(height); 　　//而窗口的高度990px,表明任务栏占40px(任务栏的默认高度) 导致没有获取到全部高度

  /*————————又干掉标签页后，并加上开发者选项后————————*/
  var width=window.innerWidth,height=window.innerHeight;
  alert(width);  //1381px,说明浏览器开发者选项,对innerWidth有影响 1920-1381=549px 
  alert(height); 　　//而窗口的高度979px,任务栏占40px,标签页占了11px(990-979) 而由此得出剩下的工具栏占了1080-979=101px

结论：说明innerHeight和innerWidth确实只计算显示窗口像素,如果没有菜单栏、工具栏等外部因素挤压它,它就会自动延伸,而如果有就只按显示窗体走

测试完外部的因素,下面测试一下内部的因素滚动条

<html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
  <title>测试innerHeight属性</title>
   
  </head>
  
  <body>
  <p style="width:500px;height:1300px;background-color:red;"></p>
  
  <script>  
    window.onload=function(){
     /*————————p超出长度,带着滚动条后————————*/
     var width=window.innerWidth,height=window.innerHeight;  
      alert(width);  //窗口的宽度 1920px
      alert(height); 　　//窗口的高度 950px
   }
   </script>
  </body>

　　 </html>

结论：说明内部的滚动条对innerWidth并没有影响,即使存在对width也没有影响,依旧是1920px

最终结论：innerHeight和innerWidth获取的是窗体的高与宽,外部因素如(浏览器开发者选项,收藏夹)会对它有影响,而内部因素(滚动条)则对其没有影响

下面说一下槽点最多的IE，关于IE兼容性的问题，可以这样解决

//兼容代码可以这样子写
var width = window.innerWidth,height = window.innerHeight;

if (typeof width != &#39;number&#39;) {  //如果类型不为number,表示该浏览器不支持innerWidth属性

 if (document.compatMode == &#39;CSS1Compat&#39;) {   //CSS1Compat：判断是否为标准兼容模式。

  width = document.documentElement.clientWidth;

  height = document.docuementElement.clientHeight;

 } else { //不是标准模式,则有可能是IE6或及其以下版本(早期的浏览器对css进行解析时，并未遵守W3C标准)

  width = document.body.clientWidth;   //网页可见区域宽

  height = document.body.clientHeight;   //网页可见区域高
}
  alert(width);
  alert(height);

以上是JavaScript中的innerWidth和innerHeight的详解的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

使用Next.js（后端集成）构建多租户SaaS应用程序Apr 11, 2025 am 08:23 AM

我使用您的日常技术工具构建了功能性的多租户SaaS应用程序（一个Edtech应用程序），您可以做同样的事情。首先，什么是多租户SaaS应用程序？多租户SaaS应用程序可让您从唱歌中为多个客户提供服务

如何使用Next.js（前端集成）构建多租户SaaS应用程序Apr 11, 2025 am 08:22 AM

本文展示了与许可证确保的后端的前端集成，并使用Next.js构建功能性Edtech SaaS应用程序。前端获取用户权限以控制UI的可见性并确保API要求遵守角色库

JavaScript：探索网络语言的多功能性Apr 11, 2025 am 12:01 AM

JavaScript是现代Web开发的核心语言，因其多样性和灵活性而广泛应用。1)前端开发：通过DOM操作和现代框架（如React、Vue.js、Angular）构建动态网页和单页面应用。2)服务器端开发：Node.js利用非阻塞I/O模型处理高并发和实时应用。3)移动和桌面应用开发：通过ReactNative和Electron实现跨平台开发，提高开发效率。

JavaScript的演变：当前的趋势和未来前景Apr 10, 2025 am 09:33 AM

JavaScript的最新趋势包括TypeScript的崛起、现代框架和库的流行以及WebAssembly的应用。未来前景涵盖更强大的类型系统、服务器端JavaScript的发展、人工智能和机器学习的扩展以及物联网和边缘计算的潜力。

神秘的JavaScript：它的作用以及为什么重要Apr 09, 2025 am 12:07 AM

JavaScript是现代Web开发的基石，它的主要功能包括事件驱动编程、动态内容生成和异步编程。1)事件驱动编程允许网页根据用户操作动态变化。2)动态内容生成使得页面内容可以根据条件调整。3)异步编程确保用户界面不被阻塞。JavaScript广泛应用于网页交互、单页面应用和服务器端开发，极大地提升了用户体验和跨平台开发的灵活性。