欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

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

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

  1. $(document).height():整個網(wǎng)頁的文檔高度
  2. $(window).height():瀏覽器可視窗口的高度
  3. $(window).scrollTop():瀏覽器可視窗口頂端距離網(wǎng)頁頂端的高度(垂直偏移)
  4. $(document.body).height();//瀏覽器當(dāng)前窗口文檔body的高度
  5. $(document.body).outerHeight(true);//瀏覽器當(dāng)前窗口文檔body的總高度 包括border padding margin
  6. $(window).width(); //瀏覽器當(dāng)前窗口可視區(qū)域?qū)挾?/li>
  7. $(document).width();//瀏覽器當(dāng)前窗口文檔對象寬度
  8. $(document.body).width();//瀏覽器當(dāng)前窗口文檔body的高度
  9. $(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);
  }

相關(guān)文章

  • jquery中each方法示例和常用選擇器

    jquery中each方法示例和常用選擇器

    這篇文章主要介紹了jquery中each方法使用及常用選擇器都有哪些,需要的朋友,可以參考下
    2014-07-07
  • JQuery 選擇器、過濾器介紹

    JQuery 選擇器、過濾器介紹

    使用過AJAX技術(shù)的人都知道大名鼎鼎的JQuery。雖然我來學(xué)習(xí)之前有看過AJAX的視頻,但那時對WEB應(yīng)用這個東西還比較模糊,不清楚HTML、JSP與Servlet是怎么工作的,甚至不知道JQuery包裝的是什么東西。
    2011-02-02
  • jQuery制作input提示內(nèi)容(兼容IE8以上)

    jQuery制作input提示內(nèi)容(兼容IE8以上)

    這篇文章主要為大家詳細(xì)介紹了jQuery制作input提示內(nèi)容,兼容IE8以上,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2017-07-07
  • 基于jquery實(shí)現(xiàn)拆分姓名的方法(純JS版)

    基于jquery實(shí)現(xiàn)拆分姓名的方法(純JS版)

    jquery拆分姓名處理程序如下,純js實(shí)現(xiàn)的,感興趣的朋友可以參考下哈,希望對你有所幫助
    2013-05-05
  • jQuery動態(tài)修改超鏈接地址的方法

    jQuery動態(tài)修改超鏈接地址的方法

    這篇文章主要介紹了jQuery動態(tài)修改超鏈接地址的方法,實(shí)例分析了jQuery中attr方法的使用技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
    2015-02-02
  • JQuery中節(jié)點(diǎn)遍歷方法實(shí)例

    JQuery中節(jié)點(diǎn)遍歷方法實(shí)例

    這篇文章主要介紹了JQuery中節(jié)點(diǎn)遍歷方法,實(shí)例分析了jQuery遍歷節(jié)點(diǎn)的技巧,需要的朋友可以參考下
    2015-05-05
  • jquery 跨域訪問問題解決方法(筆記)

    jquery 跨域訪問問題解決方法(筆記)

    對于js跨域訪問,在先前也曾碰到過,但可能并沒有認(rèn)真去對待,可能查看過相關(guān)資料,但當(dāng)著兩天再次碰到這個問題時,走了不少彎路才找到問題原因。記下這次解決過程,為自己不再強(qiáng)大的記憶力默哀一下。
    2011-06-06
  • 使用jQuery實(shí)現(xiàn)Web頁面換膚功能的要點(diǎn)解析

    使用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)淡入淡出效果輪播圖

    基于jQuery實(shí)現(xiàn)淡入淡出效果輪播圖

    這篇文章主要為大家詳細(xì)介紹了基于jQuery淡入淡出效果輪播圖,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2016-08-08
  • jquery $(document).ready() 與window.onload的區(qū)別

    jquery $(document).ready() 與window.onload的區(qū)別

    Jquery中$(document).ready()的作用類似于傳統(tǒng)JavaScript中的window.onload方法,不過與window.onload方法還是有區(qū)別的。
    2009-12-12

最新評論