window.onresize 怎么用
时间: 2023-04-27 20:06:40 浏览: 456
window.onresize 是一个JavaScript事件,用于在窗口大小发生改变时触发相应的函数。可以通过以下步骤使用:
1. 在JavaScript代码中定义一个函数,该函数将在窗口大小改变时被调用。
2. 使用window.onresize属性将该函数与窗口大小改变事件关联起来。
例如,以下代码将在窗口大小改变时调用名为myFunction的函数:
```
function myFunction() {
// 在此处添加代码以响应窗口大小改变事件
}
window.onresize = myFunction;
```
当窗口大小改变时,myFunction函数将被调用并执行其中的代码。可以在函数中添加任何希望在窗口大小改变时执行的代码。
相关问题
window.onresize和resize
`window.onresize` 和 `resize` 事件都是在窗口大小改变时触发的事件,但是它们有一些区别。
`window.onresize` 是 `window` 对象的一个属性,它表示在窗口大小改变时需要执行的处理函数。可以使用 `window.onresize` 属性来添加或删除事件处理函数,例如:
```javascript
window.onresize = function() {
// 窗口大小改变时执行的代码
}
```
`resize` 事件是 `Window` 对象的一个事件,它表示窗口大小改变时触发的事件。可以使用 `window.addEventListener` 方法来添加或删除 `resize` 事件的处理函数,例如:
```javascript
window.addEventListener('resize', function() {
// 窗口大小改变时执行的代码
})
```
相比之下,使用 `addEventListener` 方法添加事件处理函数可以多次添加不同的处理函数,而使用 `onresize` 属性只能设置一个处理函数,并且最后设置的函数会覆盖之前设置的函数。
window.onresize=function()
以下是两个关于window.onresize=function()的例子:
1. 引用中的例子是在窗口大小改变时触发两个函数的执行。第一个函数会弹出一个警告框显示"abc",而第二个函数会弹出一个警告框显示"error"。这意味着当窗口大小改变时,会先执行第一个函数,然后再执行第二个函数。
```javascript
$(function() {
window.onresize = function() {
alert("abc");
};
window.onresize = function() {
alert("error");
};
})
```
2. 引用中的例子是在窗口大小改变时触发一个函数的执行,并且在函数内部使用setTimeout函数设置了一个延时100毫秒后执行的函数。这意味着当窗口大小改变时,会执行一个函数,然后在100毫秒后执行另一个函数。
```javascript
$(function() {
window.onresize = function() {
setTimeout(function(){
alert("延时100ms执行");
}, 100);
};
})
```