JavaScript简单修改窗口大小的方法

JavaScript 是前端开发中最常用的语言之一。在这篇文章中，我们将介绍如何使用 JavaScript 修改网页窗口大小的方法。

目录

1. 获取窗口大小
2. 设置窗口大小
3. 示例代码
4. 结论

1. 获取窗口大小

首先，我们需要了解如何获取当前窗口的尺寸。您可以使用 window.innerWidth 和 window.innerHeight 属性来获取窗口的宽度和高度，如下所示：

var width = window.innerWidth;
var height = window.innerHeight;
console.log('Window width: ' + width);
console.log('Window height: ' + height);

请注意，window.innerWidth 和 window.innerHeight 返回的是窗口的视口大小，即不包括工具栏、滚动条等元素占用的空间。

2. 设置窗口大小

接下来，让我们看看如何使用 JavaScript 设置窗口大小。您可以使用 window.resizeTo() 方法来设置窗口的宽度和高度，如下所示：

window.resizeTo(500, 500);

此代码将把窗口的大小设置为 500 x 500 像素。

请注意，对于外部创建的弹出窗口，resizeTo() 方法可能会被浏览器禁用或限制。如果要在弹出窗口中使用此方法，请确保该窗口是由脚本创建而不是由用户手动打开的。

3. 示例代码

下面是一个完整的示例代码，演示如何获取当前窗口的大小并将其更改为指定的大小：

// 获取窗口大小
var width = window.innerWidth;
var height = window.innerHeight;
console.log('Current window size: ' + width + ' x ' + height);

// 设置窗口大小
window.resizeTo(500, 500);
console.log('New window size: 500 x 500');

您可以在浏览器控制台中运行此代码，以查看输出结果。

4. 结论

通过 JavaScript 修改网页窗口大小是一项简单而有用的功能，可使您的网站更具交互性和响应能力。但请确保使用这种方法时，用户体验和访问性不会受到影响。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/3979