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中

object.onresize = function() { myScript };

在JavaScript中，使用addEventListener()方法

object.addEventListener("resize", myScript);

让我们看一些插图以了解onresize事件。

例

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

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

 This is an example of using onresize attribute. 
 Try to resize the browser's window to see the effect. 

 
 You have resized the window  0  times.

输出量

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

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

示例-使用JavaScript

在此示例中，我们使用JavaScript的onresize事件。

 This is an example of using JavaScript's onresize event. 
 Try to resize the browser's window to see the effect. 

 
 You have resized the window  0  times.

输出量

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

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

示例-使用addEventListener()方法

在此示例中，我们使用JavaScript的addEventListener()方法。

 This is an example of using JavaScript's addEventListener() method. 
 Try to resize the browser's window to see the effect. 

 
 You have resized the window  0  times.

输出量

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

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