Вы можете просто использовать метод addEventListener() для регистрации обработчика событий, который будет прослушивать событие resize — изменения размера окна браузера, например window.addEventListener('resize', ...).

В следующем примере будет отображаться текущая ширина и высота окна браузера при изменении размера.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Window Resize Event</title>
</head>
<body>
<div id="result"></div>

<script>        
// Определяем функции прослушивателя событий
function displayWindowSize(){
    // Получаем ширину и высоту окна без полос прокрутки
    var w = document.documentElement.clientWidth;
    var h = document.documentElement.clientHeight;
    
    // Отображение результата внутри элемента div
    document.getElementById("result").innerHTML = "Width: " + w + ", " + "Height: " + h;
}
    
// Присоединяем функции прослушивателя событий к событию изменения размера окна
window.addEventListener("resize", displayWindowSize);

// Вызов функции в первый раз
displayWindowSize();
</script>
<p><strong>Заметка:</strong> Измените размер окна браузера, чтобы увидеть, как это работает.</p>
</body>
</html>

Вам следует избегать использования такого решения, как window.onresize = function(event) { ... };, поскольку оно переопределяет функцию обработчика событий window.onresize. Вам лучше назначить новый обработчик событий изменения размера с помощью прослушивателя событий, как показано в примере выше.

Подробнее см. Руководство по прослушивателям событий JavaScript, чтобы узнать об этом больше.

Читайте также

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.