JS与jQuery获取屏幕、浏览器及页面宽高详解

页面展示结构由外至内依次包含屏幕、浏览器窗口及页面本身。HTML元素位于页面内部，页面嵌入在浏览器窗口中，而浏览器窗口则显示在屏幕上。利用JavaScript中的特定对象，可以获取这些容器的尺寸数据。容器尺寸指的是当前分辨率下的高度和宽度，因此分辨率不同，获取到的数值也会随之变化。

使用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获取屏幕、浏览器及页面宽高的对比整理至此结束。如需了解更多相关内容，建议搜索本站过往文章或继续阅读后续相关文章，感谢大家的支持。