JavaScript教程-JavaScript onresize 事件
JavaScript 中的 onresize 事件通常在窗口大小发生变化时触发。要获取窗口的大小，我们可以使用 JavaScript 的 window.outerWidth 和 window.outerHeight 事件。我们还可以使用 JavaScript 的属性，例如 innerWidth, innerHeight, clientWidth, ClientHeight, offsetWidth, offsetHeight，来获取元素的大小。
在 HTML 中，我们可以使用 onresize 属性并将一个 JavaScript 函数分配给它。我们还可以使用 JavaScript 的 addEventListener() 方法，将一个 resize 事件传递给它以获得更大的灵活性。
语法
接下来，我们来看一下在 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>解释：
- 定义一个计数器变量 i。
- 定义 fun() 函数，其中获取窗口的宽度和高度，并显示在页面上。还将计数器变量的值递增，显示在页面上。
- 在
<body>元素的 onresize 属性中，指定要在窗口大小调整时执行的函数。
输出
在代码执行并加载页面后，输出如下图所示：
当我们尝试调整窗口大小时，输出将如下图所示：
示例 - 使用 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>解释：
- 使用 getElementsByTagName("BODY")[0].onresize 设置页面加载时要执行的函数为 fun() 函数。
- 定义计数器变量 i。
- 定义 fun() 函数，其中获取窗口的宽度和高度，并显示在页面上。还将计数器变量的值递增，显示在页面上。
输出
在代码执行并加载页面后，输出如下图所示：
当我们尝试调整窗口大小时，输出将如下图所示：
示例 - 使用 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>解释：
- 使用 window.addEventListener("resize", fun) 添加一个监听器，监听 resize 事件，并在事件触发时执行 fun() 函数。
- 定义计数器变量 i。
- 定义 fun() 函数，其中获取窗口的宽度和高度，并显示在页面上。还将计数器变量的值递增，显示在页面上。
输出
在代码执行并加载页面后，输出如下图所示：
