【JavaScript】onresizeイベントハンドラについて
onresizeイベントハンドラとは
JavaScriptのonresizeイベントハンドラは、ブラウザウィンドウやHTML要素のサイズが変更されたときにトリガーされます。このイベントを使用することで、画面サイズの変化に応じた動的なUI変更を実現できます。
主にレスポンシブデザインや、画面のサイズに応じた処理を行いたい場合に利用されます。
onresizeイベントの用途
以下のような場面でonresizeイベントを使用することが一般的です：
- ウィンドウサイズの変更に応じて要素のレイアウトを調整する。
- レスポンシブなデザインを実現する。
- グラフやキャンバスの再描画。
- 特定のサイズ条件を満たしたときにアニメーションや他の処理を開始する。
onresizeの使い方
onresizeイベントハンドラは、以下の方法で使用できます：
- HTML属性として直接指定する。
- JavaScriptで
window.onresizeを設定する。 - イベントリスナーを使用して設定する。
コード例
HTML属性を使用した例
<script>
function resizeAlert() {
alert("ウィンドウサイズが変更されました！");
}
</script>
<body onresize="resizeAlert()">
ウィンドウサイズを変更してみてください。
</body>
JavaScriptでwindow.onresizeを設定する例
window.onresize = function() {
console.log("現在のウィンドウ幅: " + window.innerWidth);
};
イベントリスナーを使用した例
window.addEventListener("resize", function() {
document.body.textContent = "現在のウィンドウ高さ: " + window.innerHeight;
});
キャンバスの再描画の例
const canvas = document.createElement("canvas");
document.body.appendChild(canvas);
const context = canvas.getContext("2d");
function resizeCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
context.fillStyle = "lightblue";
context.fillRect(0, 0, canvas.width, canvas.height);
}
window.addEventListener("resize", resizeCanvas);
resizeCanvas();
特定のサイズ条件に応じた処理の例
window.addEventListener("resize", function() {
if (window.innerWidth < 600) {
document.body.style.backgroundColor = "pink";
} else {
document.body.style.backgroundColor = "white";
}
});
トップに戻る