Js/Jquery宽度和高度的获取

最新推荐文章于 2021-07-20 18:37:46 发布

Bambi12

最新推荐文章于 2021-07-20 18:37:46 发布

阅读量192

点赞数

分类专栏： JS

JS 专栏收录该内容

27 篇文章

订阅专栏

本文详细介绍了使用JavaScript和JQuery获取网页的各种尺寸参数，包括窗口大小、文档大小、滚动位置、屏幕分辨率等，为前端开发人员提供了全面的尺寸获取指南。

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

 var usewidth = document.documentElement.clientWidth || document.body.clientWidth;
 var useheight = document.documentElement.clientHeight || document.body.clientHeight;

Js获取宽度和高度

document.body.clientWidth ==> body对象宽度
document.body.clientHeight ==>body对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.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获取宽度和高度

$(window).height() 　              //浏览器时下窗口可视区域高度   
$(document).height()　           //浏览器时下窗口文档的高度   
$(document.body).height()　　　　　　//浏览器时下窗口文档body的高度   
$(document.body).outerHeight(true)　//浏览器时下窗口文档body的总高度 包括border padding margin   
$(window).width() 　   //浏览器时下窗口可视区域宽度   
$(document).width()   //浏览器时下窗口文档对于象宽度   
$(document.body).width()　　　　　　//浏览器时下窗口文档body的高度   
$(document.body).outerWidth(true)　//浏览器时下窗口文档body的总宽度 包括border padding

https://www.cnblogs.com/whb17bcdq/p/6513766.html
https://www.cnblogs.com/liumangdashi/p/8036103.html