📅 最后修改于: 2023-12-03 15:16:06.383000 🧑 作者: Mango
在JavaScript中，onresize事件是一个响应浏览器窗口大小调整的事件。当用户调整浏览器窗口的大小时，这个事件会被触发。通过使用onresize事件，程序员可以执行特定的操作来适应不同大小的窗口或执行其他与窗口大小相关的操作。
为了使用onresize事件，我们可以通过两种方式将事件处理程序绑定到窗口对象上。
最简单的方式是在HTML元素中直接指定onresize事件处理程序：
<body onresize="myFunction()">
在这个例子中，每当窗口调整大小时，会调用名为myFunction的JavaScript函数。
另一种方式是使用JavaScript代码将事件处理程序绑定到窗口对象上：
window.onresize = function() {
// 在这儿执行操作
};
在这个例子中，我们创建了一个匿名函数，并将其赋值给window.onresize属性。当窗口调整大小时，这个函数会被调用。
下面是一个使用onresize事件的示例，它改变网页背景颜色以适应窗口大小的变化：
<!DOCTYPE html>
<html>
<head>
<title>onresize示例</title>
<style>
body {
background-color: yellow;
}
</style>
</head>
<body onresize="changeColor()">
<script>
function changeColor() {
var width = window.innerWidth;
var height = window.innerHeight;
if (width > height) {
document.body.style.backgroundColor = "yellow";
} else {
document.body.style.backgroundColor = "cyan";
}
}
</script>
</body>
</html>
在这个示例中，当窗口的宽度大于高度时，背景颜色将保持为黄色；否则，背景颜色将改变为青色。
onresize事件是JavaScript中用于响应浏览器窗口大小调整的事件。通过使用该事件，程序员可以编写代码来适应不同大小的窗口或执行其他与窗口大小相关的操作。无论是通过HTML属性还是JavaScript代码，都可以将事件处理程序绑定到窗口对象上。在编写代码时，我们可以根据窗口大小执行相应的操作，从而提供更好的用户体验。