JavaScript onresize
通常在调整窗口大小后会发生JavaScript中的
onresize 事件。要获取窗口的大小，我们可以使用JavaScript的
window.outerWidth 和
window.outerHeight 事件。我们还可以使用JavaScript的属性，例如
innerWidth，innerHeight，clientWidth，ClientHeight，offsetWidth，offsetHeight 来获取元素的大小。
In HTML，我们可以使用
onresize 属性并为其分配JavaScript函数。我们还可以使用JavaScript的
addEventListener()方法并传递
调整大小
语法
现在，我们看到在HTML和javascript中使用onresize事件的语法(没有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 事件来获取高度和宽度
当用户调整窗口大小时，更新后的窗口宽度和高度将显示在屏幕上。它还将显示用户尝试调整窗口大小的次数。当我们更改窗口的高度时，更新的高度将相应更改。同样，当我们更改窗口的宽度时，更新的宽度也会相应地更改。
<!DOCTYPE html>
<html>
<head>
<script>
var i = 0;
function fun() {
var res = "Width = " + window.outerWidth + "<br>" + "Height = " + window.outerHeight;
document.getElementById("para").innerHTML = res;
var res1 = i += 1;
document.getElementById("s1").innerHTML = res1;
}
</script>
</head>
<body onresize = "fun()">
<h3> This is an example of using onresize attribute. </h3>
<p> Try to resize the browser's window to see the effect. </p>
<p id = "para"> </p>
<p> You have resized the window <span id = "s1"> 0 </span> times.</p>
</body>
</html>
输出
执行上述代码后，输出将为-
当我们尝试调整窗口大小时，输出将为-
示例-使用JavaScript
在此示例中，我们正在使用JavaScript的
onresize 事件。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h3> This is an example of using JavaScript's onresize event. </h3>
<p> Try to resize the browser's window to see the effect. </p>
<p id = "para"> </p>
<p> You have resized the window <span id = "s1"> 0 </span> times.</p>
<script>
document.getElementsByTagName("BODY")[0].onresize = function() {fun()};
var i = 0;
function fun() {
var res = "Width = " + window.outerWidth + "<br>" + "Height = " + window.outerHeight;
document.getElementById("para").innerHTML = res;
var res1 = i += 1;
document.getElementById("s1").innerHTML = res1;
}
</script>
</body>
</html>
输出
执行上述代码后，输出为-
当我们尝试调整窗口大小时，输出为-
示例-使用addEventListener()方法
在此示例中，我们使用JavaScript的
addEventListener()方法。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h3> This is an example of using JavaScript's addEventListener() method. </h3>
<p> Try to resize the browser's window to see the effect. </p>
<p id = "para"> </p>
<p> You have resized the window <span id = "s1"> 0 </span> times.</p>
<script>
window.addEventListener("resize", fun);
var i = 0;
function fun() {
var res = "Width = " + window.outerWidth + "<br>" + "Height = " + window.outerHeight;
document.getElementById("para").innerHTML = res;
var res1 = i += 1;
document.getElementById("s1").innerHTML = res1;
}
</script>
</body>
</html>
输出
执行上述代码后，输出将为-
当我们尝试调整窗口大小时，输出为-
