jquery的height()和javascript的height總結，js獲取屏幕高度

在javascript和jquery中，都有對各種高度的寫法，在這里，我們就着重講一下窗口、文檔等高度的理解。(寬度和高度差不多！)

jquery的各種高度

首先來說一說$(document)和$(window)，如下：

$(document).height();//整個網頁的高度
$(window).height();//瀏覽器可視窗口的高度
$(window).scrollTop();//瀏覽器可視窗口頂端距離網頁頂端的高度（垂直偏移）

 

用一句話理解就是：當網頁滾動條拉到最低端時，

$(document).height() == $(window).height() + $(window).scrollTop()。

注意，是拉到最低端！

當網頁高度不足瀏覽器窗口時$(document).height()返回的是$(window).height()

假如您要獲取整個網頁的高度，不建議用$("html").height()、$("body").height()的高度，

原因：

$("body").height()：body可能會有邊框，獲取的高度會比$(document).height()小； $("html").height()：在不同的瀏覽器上獲取的高度的意義會有差異，說白了就是瀏覽器不兼容。

說道這里，提及邊框和margin還有padding，我們自然想到了jquery的另外的兩個高度，那就是innerHeight()和outerHeight()

innerHeight()和outerHeight()不適用於window 和 document對象，對於window 和 document對象可以使用.height()代替。innerHeight()和outerHeight()主要用來獲取標簽的高度。

innerHeight()

innerHeight:高度＋補白 outerHeight:高度＋補白＋邊框，參數為true時：高度＋補白＋邊框＋邊距

innerHeight(value)

這個“value”參數可以是一個字符串（數字加單位）或者是一個數字,如果這個“value”參數只提供一個數字，jQuery會自動加上像素單位（px）。如果只提供一個字符串，任何有效的CSS尺寸都可以為高度賦值（就像100px, 50%, 或者 auto）。注意在現代瀏覽器中，CSS高度屬性不包含padding, border, 或者 margin， 除非box-sizingCSS屬性被應用。

jquery高度，放到瀏覽器中試一下

alert($(window).height());                           //瀏覽器當前窗口可視區域高度
alert($(document).height());                        //瀏覽器當前窗口文檔的高度
alert($(document.body).height());                //瀏覽器當前窗口文檔body的高度
alert($(document.body).outerHeight(true));  //瀏覽器當前窗口文檔body的總高度 包括border padding margin
alert($(window).width());                            //瀏覽器當前窗口可視區域寬度
alert($(document).width());                        //瀏覽器當前窗口文檔對象寬度
alert($(document.body).width());                //瀏覽器當前窗口文檔body的寬度
alert($(document.body).outerWidth(true));  //瀏覽器當前窗口文檔body的總寬度 包括border padding margin

 

javascript的各種高度

網頁可見區域寬[僅針對body]： document.body.clientWidth
網頁可見區域高[僅針對body]： document.body.clientHeight
網頁可見區域寬[僅針對body]： document.body.offsetWidth (包括滾動條和邊框，若滾動條和邊框為0，則和clientWidth相等)
網頁可見區域高[僅針對body]： document.body.offsetHeight (包括滾動條和邊框，若滾動條和邊框為0，則和clientHeight相等)
可視窗口寬度(包括滾動軸寬度)：window.innerHeight; //IE9+、Chrome、Firefox、Opera 以及 Safari
可視窗口高度，不包括瀏覽器頂部工具欄： window.innerWidth;//IE9+、Chrome、Firefox、Opera 以及 Safari
網頁正文全文寬(不包括滾動軸的寬度)： document.body.scrollWidth
網頁正文全文高：document.body.scrollHeight
//假如網頁中沒有滾動軸，document.body.scrollWidth和window.innerWidth相等，document.body.scrollHeight和window.innerHeight相等。
網頁被卷去的高： document.body.scrollTop
網頁被卷去的左： document.body.scrollLeft
網頁正文部分上： window.screenTop
網頁正文部分左： window.screenLeft
屏幕分辨率的高（整個屏幕的高度）： window.screen.height
屏幕分辨率的寬（整個屏幕的寬度）： window.screen.width
屏幕可用工作區高度： window.screen.availHeight
屏幕可用工作區寬度： window.screen.availWidth
整個瀏覽器可用工作區高度： window.outerHeight
整個瀏覽器可用工作區寬度： window.outerWidth

 

結束語

注意，在運用jquery的innerHeight()和outerHeight()的時候，可能會有瀏覽器的兼容問題，不同瀏覽器出現不同高度，總之，實踐得真知，你可以測試一下，寫幾個小的demo，總結一下！

看完jquery和javascript的height,不知道您有何感想，這篇文章希望對你有幫助，可以留言相互交流，謝謝！