JS與Jquery如何獲取屏幕、瀏覽器、頁面的寬度和高度

今天小編給大家分享一下JS與Jquery如何獲取屏幕、瀏覽器、頁面的寬度和高度的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

一個頁面的展示，從外到內的容器為：屏幕、瀏覽器以及頁面本身。HTML元素展現在頁面內，頁面展現在瀏覽器內，而瀏覽器展現在屏幕內。通過Js的一些對象可以獲取這些容器的高度、寬度。容器的尺寸是指當前分辨率下的高度和寬度（分辨率不同，值就不相同）。

Javascript獲取各種屏幕的寬度和高度

網頁可見區域寬： document.body.clientWidth
網頁可見區域高： document.body.clientHeight
網頁可見區域寬： document.body.offsetWidth (包括邊線的寬)
網頁可見區域高： document.body.offsetHeight (包括邊線的高)
網頁正文全文寬： document.body.scrollWidth
網頁正文全文高： document.body.scrollHeight
網頁被卷去的高： document.body.scrollTop
網頁被卷去的左： document.body.scrollLeft
網頁正文部分上： window.screenTop
網頁正文部分左： window.screenLeft
屏幕分辨率的高： window.screen.height
屏幕分辨率的寬： window.screen.width
屏幕可用工作區高度： window.screen.availHeight
屏幕可用工作區寬度： window.screen.availWidth

jQuery獲取各種屏幕的寬度和高度

$(document).ready(function(){
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
})

以上就是“JS與Jquery如何獲取屏幕、瀏覽器、頁面的寬度和高度”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。