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

  1. Добавить событие изменения размера с помощью функции addEventListener() в JavaScript
  2. Добавить событие изменения размера с помощью функции onresize() в JavaScript

В этом руководстве будет обсуждаться добавление события изменения размера с помощью функций addEventListener() и onresize() в JavaScript.

Добавить событие изменения размера с помощью функции addEventListener() в JavaScript

Чтобы добавить событие изменения размера в окно, мы можем использовать функцию addEventListener() в JavaScript. Эта функция добавляет к объекту событие, содержащее функцию. Например, давайте добавим событие в окно объекта, чтобы получить его ширину и высоту и отобразить его на веб-странице. См. Код ниже.

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<span>Width = </span><span id="SpanID1"></span>
	<br />
	<span>Height = </span><span id="SpanID2"></span>
	<script type="text/javascript">
start();
window.addEventListener('resize', start);

function start(){
  document.getElementById('SpanID1').innerText = document.documentElement.clientWidth;
  document.getElementById('SpanID2').innerText = document.documentElement.clientHeight;
}
	</script>
</body>
</html>

Выход:

Width = 798
Height = 779

В приведенном выше коде мы добавили диапазон с текстом Width=, а после этого мы добавили пустой диапазон с идентификатором SpanID1 в раздел body. Мы добавили тег br для перемещения курсора на новую строку, а в новой строке мы добавили еще один диапазон с текстом Height=, а после этого мы добавили еще один пустой диапазон с идентификатором SpanID2.

Идентификатор диапазона будет использоваться для получения элемента в JavaScript. В теге скрипта у нас есть функция start(), которая используется для изменения текста двух промежутков в зависимости от ширины и высоты окна. После функции start() мы добавили событие изменения размера, которое будет вызывать функцию start(), когда пользователь изменяет размер окна. Ширина и высота окна будут отображаться на странице и будут меняться по мере изменения размера окна. Вы можете сохранить приведенный выше код в HTML-файл, открыть его в любом браузере и изменить его размер, чтобы увидеть, работает ли код или нет. Вы также можете использовать функцию addEventListener(), чтобы добавить событие к любому объекту, например, к флажку.

Добавить событие изменения размера с помощью функции onresize() в JavaScript

Чтобы добавить событие изменения размера в окно, мы можем использовать функцию onresize() в JavaScript. Эта функция используется, чтобы указать, что произойдет, если размер окна изменится. Например, давайте добавим событие в окно объекта, чтобы получить его ширину и высоту и отобразить его на веб-странице. См. Код ниже.

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<span>Width = </span><span id="SpanID1"></span>
	<br />
	<span>Height = </span><span id="SpanID2"></span>
	<script type="text/javascript">
start();
window.onresize = start;
function start(){
  document.getElementById('SpanID1').innerText = document.documentElement.clientWidth;
  document.getElementById('SpanID2').innerText = document.documentElement.clientHeight;
}
	</script>
</body>
</html>

Выход:

Width = 798
Height = 779

В приведенном выше коде функция start() будет вызываться при изменении размера окна. Как видите, результат такой же, как и у описанного выше метода.

Сопутствующая статья - JavaScript Event

  • Вызов нескольких функций JavaScript в событии Onclick