📜  JavaScript onresize事件

📅  最后修改于: 2020-10-26 03:29:18             🧑  作者: Mango

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.

输出量

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

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