Событие изменения размера 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 для получения высоты и ширины окна.
Когда пользователь изменяет размер окна, обновленные ширина и высота окна будут отображаться на экране. Он также покажет, сколько раз пользователь пытался изменить размер окна. Когда мы изменим высоту окна, обновленная высота изменится соответственно. Точно так же, когда мы изменим ширину окна, обновленная ширина изменится соответственно.
<html>
<head>
<title>Document</title>
<script>
let i = 0;
function fun() {
let res = "Width = " + window.outerWidth + "<br>" + "Height = " + window.outerHeight;
document.querySelector("#para").innerHTML = res;
let res1 = i += 1;
document.querySelector("#s1").innerHTML = res1;
}
</script>
</head>
<body onresize = "fun()">
<p>Попробуйте изменить размер окна браузера, чтобы увидеть эффект.</p>
<p id="para"> </p>
<p>Вы изменили размер окна <span id="s1">0</span> раз.</p>
</body>
</html>
Пример — использование JavaScript
В этом примере мы используем событие JavaScript onresize .
<html>
<head>
<title>Document</title>
</head>
<body>
<p>Попробуйте изменить размер окна браузера, чтобы увидеть эффект.</p>
<p id="para"> </p>
<p>Вы изменили размер окна <span id="s1">0</span> раз.</p>
<script>
document.getElementsByTagName("BODY")[0].onresize = function() {fun()};
let i = 0;
function fun() {
let res = "Width = " + window.outerWidth + "<br>" + "Height = " + window.outerHeight;
document.querySelector("#para").innerHTML = res;
let res1 = i += 1;
document.querySelector("#s1").innerHTML = res1;
}
</script>
</body>
</html>
Пример — использование метода addEventListener()
В этом примере мы используем метод JavaScript addEventListener() .
<html>
<head>
<title>Document</title>
</head>
<body>
<p>Попробуйте изменить размер окна браузера, чтобы увидеть эффект.</p>
<p id="para"> </p>
<p>Вы изменили размер окна <span id="s1">0</span> раз.</p>
<script>
window.addEventListener("resize", fun);
let i = 0;
function fun() {
let res = "Width = " + window.outerWidth + "<br>" + "Height = " + window.outerHeight;
document.querySelector("#para").innerHTML = res;
let res1 = i += 1;
document.querySelector("#s1").innerHTML = res1;
}
</script>
</body>
</html>