jquery獲取文檔高度和窗口高度匯總
jquery獲取窗口高度和窗口高度,$(document).height()、$(window).height()
- $(document).height():整個網(wǎng)頁的文檔高度
- $(window).height():瀏覽器可視窗口的高度
- $(window).scrollTop():瀏覽器可視窗口頂端距離網(wǎng)頁頂端的高度(垂直偏移)
- $(document.body).height();//瀏覽器當(dāng)前窗口文檔body的高度
- $(document.body).outerHeight(true);//瀏覽器當(dāng)前窗口文檔body的總高度 包括border padding margin
- $(window).width(); //瀏覽器當(dāng)前窗口可視區(qū)域?qū)挾?/li>
- $(document).width();//瀏覽器當(dāng)前窗口文檔對象寬度
- $(document.body).width();//瀏覽器當(dāng)前窗口文檔body的高度
- $(document.body).outerWidth(true);//瀏覽器當(dāng)前窗口文檔body的總寬度 包括border padding margin
用一句話理解就是:當(dāng)網(wǎng)頁滾動條拉到最低端時,$(document).height() == $(window).height() + $(window).scrollTop()。
當(dāng)網(wǎng)頁高度不足瀏覽器窗口時$(document).height()返回的是$(window).height()。
不建議使用$("html").height()、$("body").height()這樣的高度。
原因:
$("body").height():body可能會有邊框,獲取的高度會比$(document).height()?。?/p>
$("html").height():在不同的瀏覽器上獲取的高度的意義會有差異,說白了就是瀏覽器不兼容。
$(window).height()值有問題,返回的不是瀏覽器窗口的高度?
原因:網(wǎng)頁沒有加上<!DOCTYPE>聲明。
js獲取頁面高度和窗口高度
實(shí)際應(yīng)用:設(shè)置內(nèi)容區(qū)域合適的高度
//設(shè)置內(nèi)容區(qū)域合適高度 var docH = $(document).height(), winH = $(window).height(), headerH = $(".header").outerHeight(); footerH = $(".footer").outerHeight(); if(docH<=winH+4){ $("div.container").height(winH-headerH-footerH-50); }
- jquery實(shí)現(xiàn)動態(tài)改變div寬度和高度
- jquery動態(tài)改變div寬度和高度
- 基于jQuery實(shí)現(xiàn)左右div自適應(yīng)高度完全相同的代碼
- js/jquery獲取瀏覽器窗口可視區(qū)域高度和寬度以及滾動條高度實(shí)現(xiàn)代碼
- js和jquery如何獲取圖片真實(shí)的寬度和高度
- JQuery獲取當(dāng)前屏幕的高度寬度的實(shí)現(xiàn)代碼
- JS和jquery獲取各種屏幕的寬度和高度的代碼
- 使用jquery獲取網(wǎng)頁中圖片高度的兩種方法
- JQuery獲取各種寬度、高度(format函數(shù))實(shí)例
- JQuery獲取瀏覽器窗口內(nèi)容部分高度的代碼
- jQuery獲取頁面及個元素高度、寬度的總結(jié)——超實(shí)用
- jquery實(shí)現(xiàn)在頁面加載完畢后獲取圖片高度或?qū)挾?/a>
- jQuery實(shí)現(xiàn)獲取隱藏div高度的方法示例
相關(guān)文章
jQuery制作input提示內(nèi)容(兼容IE8以上)
這篇文章主要為大家詳細(xì)介紹了jQuery制作input提示內(nèi)容,兼容IE8以上,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-07-07基于jquery實(shí)現(xiàn)拆分姓名的方法(純JS版)
jquery拆分姓名處理程序如下,純js實(shí)現(xiàn)的,感興趣的朋友可以參考下哈,希望對你有所幫助2013-05-05JQuery中節(jié)點(diǎn)遍歷方法實(shí)例
這篇文章主要介紹了JQuery中節(jié)點(diǎn)遍歷方法,實(shí)例分析了jQuery遍歷節(jié)點(diǎn)的技巧,需要的朋友可以參考下2015-05-05使用jQuery實(shí)現(xiàn)Web頁面換膚功能的要點(diǎn)解析
網(wǎng)頁換膚的實(shí)質(zhì)就是切換CSS樣式,關(guān)鍵是給用戶做出點(diǎn)擊切換的功能以及換膚完成之后的緩存記錄功能,下面我們就來看一下使用jQuery實(shí)現(xiàn)Web頁面換膚功能的要點(diǎn)解析:2016-05-05基于jQuery實(shí)現(xiàn)淡入淡出效果輪播圖
這篇文章主要為大家詳細(xì)介紹了基于jQuery淡入淡出效果輪播圖,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-08-08jquery $(document).ready() 與window.onload的區(qū)別
Jquery中$(document).ready()的作用類似于傳統(tǒng)JavaScript中的window.onload方法,不過與window.onload方法還是有區(qū)別的。2009-12-12