JS與Jquery獲取屏幕、瀏覽器、頁面的寬度和高度對比整理

更新時間：2023年02月11日 14:59:37 投稿：yin

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

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

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

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

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

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

到此這篇關于JS與Jquery獲取屏幕、瀏覽器、頁面的寬度和高度對比整理的文章就介紹到這了,更多相關JS與Jquery獲取寬度和高度內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: