浅谈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> <div style="width:500px;height:1300px;background-color:red;"></div> <script> window.onload=function(){ /*————————div超出长度,带着滚动条后————————*/ 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 != 'number') { //如果类型不为number,表示该浏览器不支持innerwidth属性 if (document.compatmode == 'css1compat') { //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就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
推荐阅读