淺談JavaScript的innerWidth與innerHeight
innerWidth與innerHeight屬性
說明:window對象的只讀屬性,聲明了窗口的文檔顯示區(qū)的高度和寬度,以像素(px)為計量單位。 (注意:這里的寬度和高度不包括菜單欄、工具欄以及滾動條等的高度)
下面便對這兩個屬性進行驗證:
屏幕分辨率為:1920x1080 瀏覽器:QQ瀏覽器(內(nèi)核是Chrome) 代碼如下:
var width=window.innerWidth,height=window.innerHeight; //分別定義width和height接收窗口的高和寬
alert(width); //窗口的寬度 1920px
alert(height); //窗口的高度 950px
innerWidth因為瀏覽器兩旁沒有遮擋物,所以完美的得到了屏幕的寬度1920,而innerHeight因為瀏覽器上面有工具欄,顯示屏又有任務欄,所以被擠掉了130px
這次博主依次干掉了任務欄(其實就是隱藏了)和工具欄中的標簽頁 并按下F12加上了開發(fā)者選項 再次進行測試:
/*————————干掉任務欄后————————*/ var width=window.innerWidth,height=window.innerHeight; alert(width); //寬度沒有變化,還是1920px alert(height); //而窗口的高度990px,表明任務欄占40px(任務欄的默認高度) 導致沒有獲取到全部高度 /*————————又干掉標簽頁后,并加上開發(fā)者選項后————————*/ var width=window.innerWidth,height=window.innerHeight; alert(width); //1381px,說明瀏覽器開發(fā)者選項,對innerWidth有影響 1920-1381=549px alert(height); //而窗口的高度979px,任務欄占40px,標簽頁占了11px(990-979) 而由此得出剩下的工具欄占了1080-979=101px
結(jié)論:說明innerHeight和innerWidth確實只計算顯示窗口像素,如果沒有菜單欄、工具欄等外部因素擠壓它,它就會自動延伸,而如果有就只按顯示窗體走
測試完外部的因素,下面測試一下內(nèi)部的因素滾動條
<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>
結(jié)論:說明內(nèi)部的滾動條對innerWidth并沒有影響,即使存在對width也沒有影響,依舊是1920px
最終結(jié)論:innerHeight和innerWidth獲取的是窗體的高與寬,外部因素如(瀏覽器開發(fā)者選項,收藏夾)會對它有影響,而內(nèi)部因素(滾動條)則對其沒有影響
下面說一下槽點最多的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; //網(wǎng)頁可見區(qū)域?qū)? height = document.body.clientHeight; //網(wǎng)頁可見區(qū)域高 } alert(width); alert(height);
以上這篇淺談JavaScript的innerWidth與innerHeight就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
js實現(xiàn)字符串和數(shù)組之間相互轉(zhuǎn)換操作
這篇文章主要介紹了js實現(xiàn)字符串和數(shù)組之間相互轉(zhuǎn)換操作的相關資料,感興趣的小伙伴們可以參考一下2016-01-01JS實現(xiàn)數(shù)據(jù)動態(tài)渲染的豎向步驟條
這篇文章主要為大家詳細介紹了JS實現(xiàn)數(shù)據(jù)動態(tài)渲染的豎向步驟條,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2020-06-06