获取屏幕、浏览器、页面的宽度和高度是前端开发中常见的需求,Javascript和jQuery都提供了相关的API来实现这个功能。下面我们来一步步剖析如何获取宽高以及它们之间的区别。
获取屏幕宽高(Javascript)
可以使用window.screen对象来获取屏幕的宽高。
var screenWidth = window.screen.width; // 屏幕宽度
var screenHeight = window.screen.height; // 屏幕高度
获取浏览器窗口宽高(Javascript)
可以使用window.innerWidth和window.innerHeight对象获取浏览器窗口的宽高。但是,这些对象的值包含滚动条所占的宽或高,所以要获取不包含滚动条的宽高,还要排除滚动条的宽高。如下所示:
var bodyWidth = document.body.clientWidth; // 浏览器可视区域宽度
var bodyHeight = document.body.clientHeight; // 浏览器可视区域高度
var documentWidth = document.documentElement.clientWidth; // 浏览器窗口文档对象宽度
var documentHeight = document.documentElement.clientHeight; // 浏览器窗口文档对象高度
获取页面宽高(Javascript)
可以使用document对象获取页面文档的宽高。
var pageWidth = document.documentElement.scrollWidth; // 页面文档对象宽度
var pageHeight = document.documentElement.scrollHeight; // 页面文档对象高度
获取屏幕、浏览器、页面的宽度和高度(jQuery)
当然,jQuery也提供了获取屏幕、浏览器、页面宽高的API,使用方法如下:
var screenWidth = $(window).width(); // 屏幕宽度
var screenHeight = $(window).height(); // 屏幕高度
var bodyWidth = $(document.body).width(); // 浏览器可视区域宽度
var bodyHeight = $(document.body).height(); // 浏览器可视区域高度
var documentWidth = $(document).width(); // 浏览器窗口文档对象宽度
var documentHeight = $(document).height(); // 浏览器窗口文档对象高度
var pageWidth = $(document.body)[0].scrollWidth; // 页面文档对象宽度
var pageHeight = $(document.body)[0].scrollHeight; // 页面文档对象高度
需要注意的是,通过jQuery获取的值不包含滚动条所占的宽高,如要获取包含滚动条的宽高,还要加上滚动条的宽高。
示例说明:
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<meta charset="UTF-8">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<style>
body {
width: 1000px;
height: 5000px;
}
.page {
margin: 30px auto;
width: 80%;
height: 500px;
background-color: #e5e5e5;
line-height: 500px;
text-align: center;
font-size: 50px;
}
</style>
</head>
<body>
<div class="page">1</div>
<div class="page">2</div>
<div class="page">3</div>
<script>
console.log(window.screen.width, window.screen.height);
console.log(document.body.clientWidth, document.body.clientHeight);
console.log(document.documentElement.clientWidth, document.documentElement.clientHeight);
console.log(document.body.scrollWidth, document.body.scrollHeight);
console.log($(window).width(), $(window).height());
console.log($(document.body).width(), $(document.body).height());
console.log($(document).width(), $(document).height());
console.log($(document.body)[0].scrollWidth, $(document.body)[0].scrollHeight);
</script>
</body>
</html>
在浏览器中打开这个html文件,可以看到浏览器窗口的宽度和高度,以及页面文档对象的宽度和高度分别被输出在控制台中。同时,还能看到页面展示出了三个高度为500px的块,可以通过观察结果证明所获取的宽高值是正确的。
总之,了解如何获取屏幕、浏览器、页面的宽度和高度,并且能够根据实际需求选取合适的API,是前端开发必备的技能之一。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:JS与Jquery获取屏幕、浏览器、页面的宽度和高度对比整理 - Python技术站