淺談DOCTYPE對$(window).height()取值的影響
前言:公司項(xiàng)目需要用到一個彈框垂直居中,網(wǎng)上類似的垂直居中彈出層大同小異,因?yàn)轫?xiàng)目是基于Jquery 下的,所以用$(window).height()-layer.height())/2 +$(document).scrollTop()取得垂直的位移。測了各種瀏覽器沒問題,后臺人員移值到項(xiàng)目中后,出問題了,當(dāng)頁面超出一屏?xí)r,在 chrome和FF下,彈出框不是在當(dāng)前屏的垂直居中,而是相對于整個網(wǎng)頁的居中。
查閱各方資料,所有結(jié)論都指出:
1.窗口高度,$(window).height()
2.文檔高度,$(document).height()
3.被卷起的高度,$(window).scrollTop()
找到原因:而后,發(fā)現(xiàn)后臺人員的頁面沒有設(shè)DOCTYPE,所以在chrome中,$(window).height()=$(document).height(),$(document).height()表示在網(wǎng)頁實(shí)際內(nèi)容高度沒有滿一屏?xí)r表示整個窗口的高度(窗口放大縮小時(shí)這個值會變化),頁當(dāng)超過一屏?xí)r表示為整個網(wǎng)頁內(nèi)容的實(shí)際高度,這點(diǎn)沒有異議,跟設(shè)不設(shè)DOCTYPE沒有影響。但是:$(window).height()在DOCTYPE為transitional.dtd時(shí)無論網(wǎng)頁內(nèi)容實(shí)際高度超不超出滿屏情況下,都等于是整個窗口的高度(窗口放大縮小時(shí)這個值會變化),如果沒有設(shè)DOCTYPE則$(window).height()=$(document).height(),在即當(dāng)內(nèi)容超一屏?xí)r$(window).height()為網(wǎng)頁實(shí)際高度,并不是所說的等于窗口高度。
解決辦法:
s要取得窗口的高度,只能根據(jù)DOCTYPE來做相應(yīng)的更改,在沒有設(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對$(window).height()取值的影響就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
jQuery實(shí)現(xiàn)Flash效果上下翻動的中英文導(dǎo)航菜單代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)Flash效果上下翻動的中英文導(dǎo)航菜單代碼,實(shí)例分析了jQuery基于鼠標(biāo)hover事件控制頁面元素動畫效果的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09jQuery實(shí)現(xiàn)的簡潔下拉菜單導(dǎo)航效果代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)的簡潔下拉菜單導(dǎo)航效果代碼,通過簡單的自定義函數(shù)實(shí)現(xiàn)頁面樣式切換功能,非常簡潔實(shí)用,需要的朋友可以參考下2015-08-08jQuery實(shí)現(xiàn)模擬marquee標(biāo)簽效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)模擬marquee標(biāo)簽效果的相關(guān)資料,需要的朋友可以參考下2015-07-07jquery實(shí)現(xiàn)控制表格行高亮實(shí)例
jquery實(shí)現(xiàn)控制表格行高亮實(shí)例,需要的朋友可以參考一下2013-06-06jquery實(shí)現(xiàn)平滑的二級下拉菜單效果
這篇文章主要介紹了jquery實(shí)現(xiàn)平滑的二級下拉菜單效果,可實(shí)現(xiàn)鼠標(biāo)滑過彈出二級下拉菜單,涉及jquery鼠標(biāo)hover事件及fadeIn與fadeOut事件操作頁面元素隱藏及顯示的實(shí)現(xiàn)技巧,需要的朋友可以參考下2015-08-08jquery實(shí)現(xiàn)人性化的有選擇性禁用鼠標(biāo)右鍵
與其使用比較暴力的手段禁用鼠標(biāo)右鍵,還不如有選擇性人性化的的禁用鼠標(biāo)右鍵,需要的朋友可以參考下2014-06-06jquery+ajax實(shí)現(xiàn)上傳圖片并顯示上傳進(jìn)度功能【附php后臺接收】
這篇文章主要介紹了jquery+ajax實(shí)現(xiàn)上傳圖片并顯示上傳進(jìn)度功能,結(jié)合實(shí)例形式分析了jQuery+ajax結(jié)合layer.js插件與php后臺交互,實(shí)現(xiàn)顯示上傳進(jìn)度的相關(guān)操作技巧,需要的朋友可以參考下2019-06-06