步入前端已經有一段時間了，很少發布自己的博客，今天我就根據網上和自己的個人見解，說一下關於js中獲取頁面高度的方法。相關鏈接https://blog.csdn.net/mystric594/article/details/71941405
Javascript:
IE中：
document.body.clientWidth ==> BODY對象寬度
document.body.clientHeight ==> BODY對象高度
document.documentElement.clientWidth ==> 可見區域寬度
document.documentElement.clientHeight ==> 可見區域高度
FireFox中：
document.body.clientWidth ==> BODY對象寬度
document.body.clientHeight ==> BODY對象高度
document.documentElement.clientWidth ==> 可見區域寬度
document.documentElement.clientHeight ==> 可見區域高度
Opera中：
document.body.clientWidth ==> 可見區域寬度
document.body.clientHeight ==> 可見區域高度
document.documentElement.clientWidth ==> 頁面對象寬度（即BODY對象寬度加上Margin寬）
document.documentElement.clientHeight ==> 頁面對象高度（即BODY對象高度加上Margin高）
alert(document.body.clientWidth); //網頁可見區域寬(body)
alert(document.body.clientHeight); //網頁可見區域高(body)
alert(document.body.offsetWidth); //網頁可見區域寬(body)，包括border、margin等
alert(document.body.offsetHeight); //網頁可見區域寬(body)，包括border、margin等
alert(document.body.scrollWidth); //網頁正文全文寬，包括有滾動條時的未見區域
alert(document.body.scrollHeight); //網頁正文全文高，包括有滾動條時的未見區域
alert(document.body.scrollTop); //網頁被卷去的Top(滾動條)
alert(document.body.scrollLeft); //網頁被卷去的Left(滾動條)
alert(window.screenTop); //瀏覽器距離Top
alert(window.screenLeft); //瀏覽器距離Left
alert(window.screen.height); //屏幕分辨率的高
alert(window.screen.width); //屏幕分辨率的寬
alert(window.screen.availHeight); //屏幕可用工作區的高
alert(window.screen.availWidth); //屏幕可用工作區的寬
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
自己驗證網上得測試，我使用的是IE11；
計算的是body的寬度和高度,不包括border（重點）
alert(document.body.clientWidth);獲取網頁的可見區域寬度，會受到屏幕的大小切換而發生變化，在谷歌和火狐上，IE最大是1333（電腦端），在手機調試下，谷歌默認都是964，火狐是按照手機的實際屏幕顯示，而且發現火狐瀏覽器手機調試時，alert失效了。
alert(document.body.clientHeight);獲取網頁可見區域的高度，會受到屏幕的大小切換而發生變化，根據內容來展示，會包括margin和padding.具體是多少在每個瀏覽器下面有一些差別。
計算的是body的寬度和高度,包括border（重點）
alert(document.body.offsetWidth);同上類似，不過包括border.
alert(document.body.offsetHeight);同上類似，不過包括border.
計算的是網頁網頁正文全文寬，包括有滾動條時的未見區域，從滾動條的一側到另外一側。(也就是說內容有好寬，好長，就有好寬或好長)；注意不包括border
alert(document.body.scrollWidth);
alert(document.body.scrollHeight);感覺等價與document.body.clientHeight
獲取滾動條的位置（即距離頂部的距離）；注意有兼容性問題
如果頭部申明的DTD的嚴格模式或是html5模式，注意谷歌，ie，火狐始終為0;
document.body.scrollTop 網頁被卷去的Top(滾動條位置)。建議需要做兼容性考慮。（手機端做測試時，經常出問題,建議使用jqery的方法）;
var heightTop = document.documentElement.scrollTop || document.body.scrollTop||
window.pageYOffset;同理
document.body.scrollLeft 網頁被卷去的Left(滾動條位置)，兼容性考慮
var left= document.documentElement.scrollLeft || document.body.scrollLeft||
window.pageXOffset;screenLeft和screenTop屬性返回窗口相對於屏幕的X和Y坐標。（注意firbox沒有這個屬性， Firefox 瀏覽器請使用 "window.screenX" and "window.screenY"）
pageXOffset 設置或返回當前頁面相對於窗口顯示區左上角的 X 位置。pageYOffset 設置或返回當前頁面相對於窗口顯示區左上角的 Y 位置。
pageXOffset 和 pageYOffset 屬性相等於 scrollX 和 scrollY 屬性。
window.screen.height，window.screen.width表示屏幕的總高度和寬度，注意包括頁面可見區域部分加上工具欄，標題欄這些。（常用於對用戶屏幕的獲取);
window.screen.availHeight,window.screen.availWidth 獲取屏幕的可見區域的高度和寬度（不包括任務欄部分）；
注意不包括菜單欄、工具欄以及滾動條等的高度（IE不支持）
window.innerWidth：可視窗口寬度(包括滾動軸寬度)：//IE9+、Chrome、Firefox、Opera 以及 Safari
window.innerHeight：可視窗口高度，不包括瀏覽器頂部工具欄：//IE9+、Chrome、Firefox、Opera 以及 Safari
注意和 ,window.screen.availWidth 的區別
screen：屏幕。這一類取到的是關於屏幕的寬度和距離，與瀏覽器無關，應該是獲取window對象的屬性。
client：使用區、客戶區。指的是客戶區，當然是指瀏覽器區域。
offset：偏移。指的是目標甲相對目標乙的距離。
scroll：卷軸、卷動。指的是包含滾動條的的屬性。
inner：內部。指的是內部部分，不含滾動條。
avail：可用的。可用區域，不含滾動條，易與inner混淆。
window.innerWidth/innerHeight：瀏覽器可見區域的內寬度、高度（不含瀏覽器的邊框，但包含滾動條）。兼容：ie9/10、chrome、firefox。
window.screen.availWidth/availHeight:屏幕的可用寬度、高度（通常與屏幕的寬度、高度一致）。兼容性：ie6/7/8/9/10、chrome、firfox
window.outerHeight：整個瀏覽器可用工作區高度（包括所有界面元素，如工具欄、滾動條）
window.outerWidth：整個瀏覽器可用工作區寬度（包括所有界面元素，如工具欄、滾動條）
JQuery
alert($(window).height()); //瀏覽器當前窗口可視區域高度（谷歌，firefox，IE都支持）；在手機調試上最清楚，firefox和手機屏幕大小是一致，谷歌不是這樣子，類似於是網頁可見區域高度，但是並不是完全是這樣的。可以隨着屏幕的大小發生改變
alert($(window).width()); //瀏覽器當前窗口可視區域寬度,谷歌和火狐，IE的電腦模式一樣的展現，但是在手機模式下，谷歌默認是980，經過測試確實是當前窗口的寬度，不隨着手機屏幕改變而改變，但是火狐瀏覽器遵循手機屏幕的大小。
一般不會隨着屏幕的改變而改變，除非是樣式的改變。
alert($(document).height()); //瀏覽器當前窗口文檔的高度
alert($(document).width()); //瀏覽器當前窗口文檔對象寬度
alert($(document.body).height()); //瀏覽器當前窗口文檔body的高度
alert($(document.body).width()); //瀏覽器當前窗口文檔body的寬度
補充：
$(document)：整個文檔
$("body")：body
$(window)：視口（有設doctype的前提下）
1)、頁面內容大於視口（瀏覽器窗口）時：$(document).height() = $("body").height() > $(window).height();
2)、頁面內容小於視口時：$(document).height() = $(window).height() > $("body").height();
另：$(window).height()還受頁頭DOCTYPE的影響，在此默認為有DOCTYPE的前提。
不加true表示不包括外邊距，margin，一般試計算具體元素，標簽這些，不適用doucument或者screen，注意對隱藏元素一樣適用
alert（$(document.body).innerHeight()）//獲取匹配元素內部區域高度（包括補白、不包括邊框）
alert（$(document.body).innerWidth()）//獲取匹配元素內部區域kuandu（包括補白、不包括邊框）
alert($(document.body).outerHeight(true)); //瀏覽器當前窗口文檔body的總高度 包括border padding margin
alert($(document.body).outerWidth(true)); //瀏覽器當前窗口文檔body的總寬度 包括border padding margin
alert($(document).scrollTop()) 獲取垂直滾動的距離 (即當前滾動的地方的窗口頂端到整個頁面頂端的距離)
alert($(document).scrollLeft() )這是獲取水平滾動條的距離
其他補充沒有測試
scrollHeight: 獲取對象的滾動高度。
scrollLeft:設置或獲取位於對象左邊界和窗口中目前可見內容的最左端之間的距離
scrollTop:設置或獲取位於對象最頂端和窗口中可見內容的最頂端之間的距離
scrollWidth:獲取對象的滾動寬度
offsetHeight:獲取對象相對於版面或由父坐標 offsetParent 屬性指定的父坐標的高度
offsetLeft:獲取對象相對於版面或由 offsetParent 屬性指定的父坐標的計算左側位置
offsetTop:獲取對象相對於版面或由 offsetTop 屬性指定的父坐標的計算頂端位置
event.clientX 相對文檔的水平座標
event.clientY 相對文檔的垂直座標
event.offsetX 相對容器的水平坐標
event.offsetY 相對容器的垂直坐標
document.documentElement.scrollTop 垂直方向滾動的值
event.clientX+document.documentElement.scrollTop 相對文檔的水平座標+垂直方向滾動的量
要獲取當前頁面的滾動條縱坐標位置，用：
document.documentElement.scrollTop;
而不是：
document.body.scrollTop;
documentElement 對應的是 html 標簽，而 body 對應的是 body 標簽
以上就是我做的關於js或者jqery的各種高度，寬度的歸納。