快捷導(dǎo)航

jquery獲取文檔高度和窗口高度匯總

更新時(shí)間：2016年01月25日 11:12:21 投稿：hebedich

本文主要給大家匯總介紹了了jQuery獲取頁面及個(gè)元素高度、寬度的方法，非常的實(shí)用，有需要的小伙伴可以參考下。下面的例子是基于jquery的參數(shù)與方法來快速獲取文檔或?yàn)g覽器可視區(qū)域的高度與寬度的代碼,希望本例子能給你帶來一些幫助。

jquery獲取窗口高度和窗口高度，$(document).height()、$(window).height()

$(document).height()：整個(gè)網(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)前窗口文檔對(duì)象寬度
$(document.body).width();//瀏覽器當(dāng)前窗口文檔body的高度
$(document.body).outerWidth(true);//瀏覽器當(dāng)前窗口文檔body的總寬度包括border padding margin

用一句話理解就是：當(dāng)網(wǎng)頁滾動(dòng)條拉到最低端時(shí)，$(document).height() == $(window).height() + $(window).scrollTop()。

當(dāng)網(wǎng)頁高度不足瀏覽器窗口時(shí)$(document).height()返回的是$(window).height()。

不建議使用$("html").height()、$("body").height()這樣的高度。

原因：

$("body").height()：body可能會(huì)有邊框，獲取的高度會(huì)比$(document).height()??；

$("html").height()：在不同的瀏覽器上獲取的高度的意義會(huì)有差異，說白了就是瀏覽器不兼容。

$(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);
  }

您可能感興趣的文章:

相關(guān)文章

JQuery彈出層示例可自定義
JQuery實(shí)現(xiàn)的彈出層，js和css可根據(jù)自己的實(shí)際情況而定，下面是具體的實(shí)現(xiàn)代碼，大家不妨參考下
2014-05-05
jq stop()和:is(:animated)的用法及區(qū)別(詳解)
下面小編就為大家?guī)硪黄猨q stop()和:is(:animated)的用法及區(qū)別(詳解)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-02-02
jQuery綁定自定義事件的魔法升級(jí)版
這篇文章主要介紹了jQuery綁定自定義事件使用技巧,通過循環(huán)綁定所有的自定義事件,在恰當(dāng)?shù)臅r(shí)機(jī)調(diào)用,需要的朋友可以參考下。
2016-06-06
jQuery實(shí)現(xiàn)表格凍結(jié)頂欄效果
昨天晚上公司遇到個(gè)小需求，就是實(shí)現(xiàn)類似表格凍結(jié)頂欄的效果。這篇文章主要介紹了jQuery實(shí)現(xiàn)表格凍結(jié)頂欄效果 ,需要的朋友可以參考下
2017-08-08
jquery實(shí)現(xiàn)checkbox全選全不選的簡(jiǎn)單實(shí)例
本篇文章主要是對(duì)jquery實(shí)現(xiàn)checkbox全選全不選的簡(jiǎn)單實(shí)例進(jìn)行了介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助
2013-12-12
animate 實(shí)現(xiàn)滑動(dòng)切換效果【實(shí)例代碼】
下面小編就為大家?guī)硪黄猘nimate 實(shí)現(xiàn)滑動(dòng)切換效果【實(shí)例代碼】。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-05-05
JQuery實(shí)現(xiàn)的圖文自動(dòng)輪播效果插件
這篇文章主要介紹了JQuery實(shí)現(xiàn)的圖文自動(dòng)輪播效果插件,涉及jQuery處理鼠標(biāo)事件及動(dòng)畫效果的方法,需要的朋友可以參考下
2015-06-06
3分鐘寫出來的Jquery版checkbox全選反選功能
checkbox全選反選的文章在以前也有介紹很多，實(shí)在是不想在提起了，然而身邊還是有些朋友不會(huì)，于是3分鐘寫出來一個(gè)估計(jì)有很多bug
2013-10-10
jQuery validate插件submitHandler提交導(dǎo)致死循環(huán)解決方法
這篇文章主要介紹了jQuery validate插件submitHandler提交導(dǎo)致死循環(huán)解決方法,對(duì)比分析了常見的錯(cuò)誤寫法造成死循環(huán)與正確寫法,需要的朋友可以參考下
2016-01-01
jquery formValidator插件ajax驗(yàn)證內(nèi)容不做任何修改再離開提示錯(cuò)誤的bug解決方法
query formValidator插件非常好用，但是有一個(gè)嚴(yán)重的Bug，在使用ajax驗(yàn)證的時(shí)候，如果輸入框的內(nèi)容已經(jīng)存在，把鼠標(biāo)放到輸入框，不做任何修改再離開，則會(huì)提示錯(cuò)誤,很是郁悶
2013-01-01