JavaScript与jQuery获取窗口及屏幕尺寸的方法汇总

作者:微光时间:2026-10-26 10:43:20浏览:232

本文详细汇总了使用JavaScript原生属性和jQuery方法获取当前窗口、浏览器及屏幕宽度和高度的多种方案。涵盖clientWidth、scrollHeight、window.innerHeight等核心属性,以及$(window).height()等jQuery选择器用法,帮助开发者准确获取页面布局尺寸。

本文整理了JavaScript与jQuery在获取屏幕、浏览器及页面尺寸方面的相关知识点,内容详实且逻辑清晰。尽管此类知识较为常见,但为了确保读者能全面掌握,以下将详细展开介绍,供各位参考学习。

在JavaScript中获取窗口宽高,主要通过操作DOM属性和window对象来实现。

var s = "";  
s += "\r\n网页可见区域宽:"+ document.body.clientWidth;  
s += "\r\n网页可见区域高:"+ document.body.clientHeight;  
s += "\r\n网页可见区域宽:"+ document.body.offsetWidth +" (包括边线和滚动条的宽)";  
s += "\r\n网页可见区域高:"+ document.body.offsetHeight +" (包括边线的宽)";  
s += "\r\n网页正文全文宽:"+ document.body.scrollWidth;  
s += "\r\n网页正文全文高:"+ document.body.scrollHeight;  
s += "\r\n网页被卷去的高:"+ document.body.scrollTop;  
s += "\r\n网页被卷去的左:"+ document.body.scrollLeft;  
s += "\r\n网页正文部分上:"+ window.screenTop;  
s += "\r\n网页正文部分左:"+ window.screenLeft;  
s += "\r\n屏幕分辨率的高:"+ window.screen.height;  
s += "\r\n屏幕分辨率的宽:"+ window.screen.width;  
s += "\r\n屏幕可用工作区高度:"+ window.screen.availHeight;  
s += "\r\n屏幕可用工作区宽度:"+ window.screen.availWidth;  
s += "\r\n你的屏幕设置是 "+ window.screen.colorDepth +" 位彩色";  
s += "\r\n你的屏幕设置 "+ window.screen.deviceXDPI +" 像素/英寸";  
alert(s);

利用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的

关于JavaScript与jQuery获取当前窗口内宽度和高度的内容至此介绍完毕。如需了解更多相关技巧,建议查阅本站历史文章或继续浏览后续内容,感谢大家的支持。

作者最新文章