JavaScriptのonresizeとは？ウィンドウサイズ変更時に処理を実行する方法
onresize は、ウィンドウやフレームのサイズが変更されたときに発生するイベントです。
画面サイズに応じてレイアウトを調整したり、リサイズ時に特定の処理を実行したい場合に利用します。
onresizeイベントとは？
ブラウザのウィンドウサイズが変更された瞬間に発生するイベントです。
レスポンシブ対応や、サイズ変更時の警告・再描画処理などに使われます。
使用例：ウィンドウサイズ変更時にメッセージを表示
<body onresize=”alert(‘リサイズされました’)”>
→ ウィンドウのサイズが変わるたびにダイアログが表示されます。
JavaScriptでの書き方（推奨）
HTML に直接書く方法のほか、JavaScript でイベントを設定する方法もあります。
window.onresize = function() {
console.log(“ウィンドウがリサイズされました”);
};
console.log(“ウィンドウがリサイズされました”);
};
→ HTML を汚さずにイベントを設定できるため、こちらの書き方が一般的です。
onresize が使える場面
- 画面サイズに応じてレイアウトを変更したいとき
- ウィンドウ幅に応じて画像サイズを変更したいとき
- リサイズ時に特定の処理を実行したいとき
- デバッグ用にサイズ変更を検知したいとき
まとめ
onresizeはウィンドウやフレームのサイズ変更時に発生するイベント- HTML に直接書く方法と JavaScript で設定する方法がある
- レスポンシブ対応や動的レイアウト調整に便利
