日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

innerWidth與innerHeight屬性

創(chuàng)新互聯(lián)致力于互聯(lián)網(wǎng)網(wǎng)站建設(shè)與網(wǎng)站營(yíng)銷(xiāo)，提供網(wǎng)站建設(shè)、成都網(wǎng)站建設(shè)、網(wǎng)站開(kāi)發(fā)、seo優(yōu)化、網(wǎng)站排名、互聯(lián)網(wǎng)營(yíng)銷(xiāo)、微信小程序定制開(kāi)發(fā)、公眾號(hào)商城、等建站開(kāi)發(fā)，創(chuàng)新互聯(lián)網(wǎng)站建設(shè)策劃專(zhuān)家，為不同類(lèi)型的客戶(hù)提供良好的互聯(lián)網(wǎng)應(yīng)用定制解決方案，幫助客戶(hù)在新的全球化互聯(lián)網(wǎng)環(huán)境中保持優(yōu)勢(shì)。

說(shuō)明：window對(duì)象的只讀屬性,聲明了窗口的文檔顯示區(qū)的高度和寬度，以像素(px)為計(jì)量單位。 (注意：這里的寬度和高度不包括菜單欄、工具欄以及滾動(dòng)條等的高度)

下面便對(duì)這兩個(gè)屬性進(jìn)行驗(yàn)證：

屏幕分辨率為：1920x1080 瀏覽器：QQ瀏覽器(內(nèi)核是Chrome) 代碼如下：

var width=window.innerWidth,height=window.innerHeight; //分別定義width和height接收窗口的高和寬

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

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

innerWidth因?yàn)闉g覽器兩旁沒(méi)有遮擋物,所以完美的得到了屏幕的寬度1920,而innerHeight因?yàn)闉g覽器上面有工具欄,顯示屏又有任務(wù)欄,所以被擠掉了130px

這次博主依次干掉了任務(wù)欄(其實(shí)就是隱藏了)和工具欄中的標(biāo)簽頁(yè) 并按下F12加上了開(kāi)發(fā)者選項(xiàng) 再次進(jìn)行測(cè)試：

/*————————干掉任務(wù)欄后————————*/
  var width=window.innerWidth,height=window.innerHeight;  
  alert(width);  //寬度沒(méi)有變化,還是1920px
  alert(height); 　　//而窗口的高度990px,表明任務(wù)欄占40px(任務(wù)欄的默認(rèn)高度) 導(dǎo)致沒(méi)有獲取到全部高度

  /*————————又干掉標(biāo)簽頁(yè)后，并加上開(kāi)發(fā)者選項(xiàng)后————————*/
  var width=window.innerWidth,height=window.innerHeight;
  alert(width);  //1381px,說(shuō)明瀏覽器開(kāi)發(fā)者選項(xiàng),對(duì)innerWidth有影響 1920-1381=549px 
  alert(height); 　　//而窗口的高度979px,任務(wù)欄占40px,標(biāo)簽頁(yè)占了11px(990-979) 而由此得出剩下的工具欄占了1080-979=101px

結(jié)論：說(shuō)明innerHeight和innerWidth確實(shí)只計(jì)算顯示窗口像素,如果沒(méi)有菜單欄、工具欄等外部因素?cái)D壓它,它就會(huì)自動(dòng)延伸,而如果有就只按顯示窗體走

測(cè)試完外部的因素,下面測(cè)試一下內(nèi)部的因素滾動(dòng)條

結(jié)論：說(shuō)明內(nèi)部的滾動(dòng)條對(duì)innerWidth并沒(méi)有影響,即使存在對(duì)width也沒(méi)有影響,依舊是1920px

最終結(jié)論：innerHeight和innerWidth獲取的是窗體的高與寬,外部因素如(瀏覽器開(kāi)發(fā)者選項(xiàng),收藏夾)會(huì)對(duì)它有影響,而內(nèi)部因素(滾動(dòng)條)則對(duì)其沒(méi)有影響

下面說(shuō)一下槽點(diǎn)最多的IE，關(guān)于IE兼容性的問(wèn)題，可以這樣解決

//兼容代碼可以這樣子寫(xiě)
var width = window.innerWidth,height = window.innerHeight;

if (typeof width != 'number') {  //如果類(lèi)型不為number,表示該瀏覽器不支持innerWidth屬性

 if (document.compatMode == 'CSS1Compat') {   //CSS1Compat：判斷是否為標(biāo)準(zhǔn)兼容模式。

  width = document.documentElement.clientWidth;

  height = document.docuementElement.clientHeight;

 } else { //不是標(biāo)準(zhǔn)模式,則有可能是IE6或及其以下版本(早期的瀏覽器對(duì)css進(jìn)行解析時(shí)，并未遵守W3C標(biāo)準(zhǔn))

  width = document.body.clientWidth;   //網(wǎng)頁(yè)可見(jiàn)區(qū)域?qū)?
  height = document.body.clientHeight;   //網(wǎng)頁(yè)可見(jiàn)區(qū)域高
}
  alert(width);
  alert(height);

以上這篇淺談JavaScript的innerWidth與innerHeight就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持創(chuàng)新互聯(lián)。