Событие изменения размера JavaScript

Событие onresize в JavaScript обычно возникает при изменении размера окна. Чтобы получить размер окна, мы можем использовать события JavaScript window.outerWidth и window.outerHeight . Мы также можем использовать свойства JavaScript, такие как innerWidth, innerHeight, clientWidth, ClientHeight, offsetWidth, offsetHeight, чтобы получить размер элемента.
В HTML мы можем использовать атрибут onresize и назначить ему функцию JavaScript. Мы также можем использовать метод JavaScript addEventListener()и передать ему событие изменения размера для большей гибкости.
Синтаксис
Теперь мы видим синтаксис использования события onresize в HTMLи в javascript(без метода addEventListener() или с использованием метода addEventListener() ).
В HTML
<element onresize="fun()">
В JavaScript
object.onresize = function() { myScript };
В JavaScript с помощью метода addEventListener()
object.addEventListener("resize", myScript);
Давайте посмотрим на некоторые примеры, чтобы понять событие onresize .

Пример

В этом примере мы используем атрибут HTML onresize . Здесь мы используем события JavaScript window.outerWidth и window.outerHeight для получения высоты и ширины окна.
Когда пользователь изменяет размер окна, обновленные ширина и высота окна будут отображаться на экране. Он также покажет, сколько раз пользователь пытался изменить размер окна. Когда мы изменим высоту окна, обновленная высота изменится соответственно. Точно так же, когда мы изменим ширину окна, обновленная ширина изменится соответственно.

Пример — использование JavaScript

В этом примере мы используем событие JavaScript onresize .

Пример — использование метода addEventListener()

В этом примере мы используем метод JavaScript addEventListener() .