JavaScript onresize 事件

JavaScript 中的 onresize 事件通常在窗口大小被调整时发生。要获取窗口的大小，我们可以使用 JavaScript 的 window.outerWidth 和 window.outerHeight 事件。我们还可以使用 JavaScript 的属性，如 innerWidth、innerHeight、clientWidth、clientHeight、offsetWidth、offsetHeight 来获取元素的大小。

在 HTML 中，我们可以使用 onresize 属性并为其分配一个 JavaScript 函数。我们还可以使用 JavaScript 的 addEventListener() 方法并向其传递一个 resize 事件，以获得更大的灵活性。

语法

现在，我们来看看在 HTML 和 JavaScript 中使用 onresize 事件的语法（不使用 addEventListener() 方法或使用 addEventListener() 方法）。

在 HTML 中

在 JavaScript 中

在 JavaScript 中使用 addEventListener() 方法

让我们看一些示例来理解 onresize 事件。

示例

在这个例子中，我们使用了 HTML 的 onresize 属性。这里，我们使用 JavaScript 的 window.outerWidth 和 window.outerHeight 事件来获取窗口的高度和宽度。

当用户调整窗口大小时，更新后的窗口宽度和高度将显示在屏幕上。它还会显示用户尝试调整窗口大小的次数。当我们改变窗口的高度时，更新后的高度会相应改变。同样，当我们改变窗口的宽度时，更新后的宽度也会相应改变。

输出

执行上述代码后，输出将是 -

当我们尝试调整窗口大小时，输出将是 -

示例 - 使用 JavaScript

在这个例子中，我们使用的是 JavaScript 的 onresize 事件。

输出

执行上述代码后，输出将是 -

当我们尝试调整窗口大小时，输出将是 -

示例 - 使用 addEventListener() 方法

在这个例子中，我们使用的是 JavaScript 的 addEventListener() 方法。

输出

执行上述代码后，输出将是 -

当我们尝试调整窗口大小时，输出将是 -