下面小編就為大家?guī)硪黄獪\談DOCTYPE對$(window).height()取值的影響。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。
前言:公司項目需要用到一個彈框垂直居中,網(wǎng)上類似的垂直居中彈出層大同小異,因為項目是基于Jquery 下的,所以用$(window).height()-layer.height())/2 +$(document).scrollTop()取得垂直的位移。測了各種瀏覽器沒問題,后臺人員移值到項目中后,出問題了,當頁面超出一屏時,在 chrome和FF下,彈出框不是在當前屏的垂直居中,而是相對于整個網(wǎng)頁的居中。
查閱各方資料,所有結論都指出:
1.窗口高度,$(window).height()
2.文檔高度,$(document).height()
3.被卷起的高度,$(window).scrollTop()
找到原因:而后,發(fā)現(xiàn)后臺人員的頁面沒有設DOCTYPE,所以在chrome中,$(window).height()=$(document).height(),$(document).height()表示在網(wǎng)頁實際內(nèi)容高度沒有滿一屏時表示整個窗口的高度(窗口放大縮小時這個值會變化),頁當超過一屏時表示為整個網(wǎng)頁內(nèi)容的實際高度,這點沒有異議,跟設不設DOCTYPE沒有影響。但是:$(window).height()在DOCTYPE為transitional.dtd時無論網(wǎng)頁內(nèi)容實際高度超不超出滿屏情況下,都等于是整個窗口的高度(窗口放大縮小時這個值會變化),如果沒有設DOCTYPE則$(window).height()=$(document).height(),在即當內(nèi)容超一屏時$(window).height()為網(wǎng)頁實際高度,并不是所說的等于窗口高度。
解決辦法:
s要取得窗口的高度,只能根據(jù)DOCTYPE來做相應的更改,在沒有設DOCTYPE時做如下處理
if($(document).height()>=$(window).height()){
_windowHeight=document.body.clientHeight;
}else{//alert($(window).height());
_windowHeight=$(document).height();
};
在有設DOCTYPE為transitional.dtd時,windowHeight=$(window).height()
以上這篇淺談DOCTYPE對$(window).height()取值的影響就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考