JS,Jquery获取屏幕的宽度和高度

原创于 2021-03-15 18:50:59 发布 · 463 阅读

0 ·

CC 4.0 BY-SA版权

HTML/CSS/javascript 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了使用JavaScript和jQuery获取网页及元素的各种尺寸和位置的方法，包括网页可见区域、正文宽高、滚动条位置等，并提供了具体示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

JavaScript获取某对象高度时()

JQuery:

$(document).ready(function(){
$(window).height(); //浏览器当前窗口可视区域高度
$(document).height(); //浏览器当前窗口文档的高度
$(document.body).height();//浏览器当前窗口文档body的高度
$(document.body).outerHeight(true);//浏览器当前窗口文档body的总高度包括border padding margin

//下面以id为”div_id“的div容器举例

$("#div_id").height(); // 获取该div本身的高度 (不包含padding,margin,border)
$("#div_id").outerHeight(); // 包含该div本身的高度, padding上下的高度, 以及border上下的高度(不包含margin的高度)
$("#div_id").outerHeight(true); // 包含该div本身的高度, 以及padding,border,margin上下的总高度

})