本文详细汇总了使用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获取当前窗口内宽度和高度的内容至此介绍完毕。如需了解更多相关技巧,建议查阅本站历史文章或继续浏览后续内容,感谢大家的支持。