前言:公司項(xiàng)目需要用到一個(gè)彈框垂直居中，網(wǎng)上類似的垂直居中彈出層大同小異，因?yàn)轫?xiàng)目是基于Jquery 下的，所以用$(window).height()-layer.height())/2 +$(document).scrollTop()取得垂直的位移。測(cè)了各種瀏覽器沒(méi)問(wèn)題，后臺(tái)人員移值到項(xiàng)目中后，出問(wèn)題了，當(dāng)頁(yè)面超出一屏?xí)r，在 chrome和FF下，彈出框不是在當(dāng)前屏的垂直居中，而是相對(duì)于整個(gè)網(wǎng)頁(yè)的居中。

查閱各方資料，所有結(jié)論都指出：

1.窗口高度，$(window).height()

2.文檔高度，$(document).height()

3.被卷起的高度，$(window).scrollTop()

找到原因:而后，發(fā)現(xiàn)后臺(tái)人員的頁(yè)面沒(méi)有設(shè)DOCTYPE，所以在chrome中，$(window).height()=$(document).height()，$(document).height()表示在網(wǎng)頁(yè)實(shí)際內(nèi)容高度沒(méi)有滿一屏?xí)r表示整個(gè)窗口的高度(窗口放大縮小時(shí)這個(gè)值會(huì)變化)，頁(yè)當(dāng)超過(guò)一屏?xí)r表示為整個(gè)網(wǎng)頁(yè)內(nèi)容的實(shí)際高度，這點(diǎn)沒(méi)有異議，跟設(shè)不設(shè)DOCTYPE沒(méi)有影響。但是:$(window).height()在DOCTYPE為transitional.dtd時(shí)無(wú)論網(wǎng)頁(yè)內(nèi)容實(shí)際高度超不超出滿屏情況下，都等于是整個(gè)窗口的高度(窗口放大縮小時(shí)這個(gè)值會(huì)變化)，如果沒(méi)有設(shè)DOCTYPE則$(window).height()=$(document).height()，在即當(dāng)內(nèi)容超一屏?xí)r$(window).height()為網(wǎng)頁(yè)實(shí)際高度，并不是所說(shuō)的等于窗口高度。

解決辦法：

s要取得窗口的高度，只能根據(jù)DOCTYPE來(lái)做相應(yīng)的更改，在沒(méi)有設(shè)DOCTYPE時(shí)做如下處理

if($(document).height()>=$(window).height()){
  _windowHeight=document.body.clientHeight;
  }else{//alert($(window).height());
  _windowHeight=$(document).height();
  };

在有設(shè)DOCTYPE為transitional.dtd時(shí)，windowHeight=$(window).height()

以上這篇淺談DOCTYPE對(duì)$(window).height()取值的影響就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論