onresizeイベント(リサイズイベント)とは、要素のサイズを変更した時のイベント。
構文
HTML
<element onresize="イベントハンドラ">
例
BODY要素
ウィンドウサイズを変更した時点にイベントハンドラを登録する場合。
<body onresize="イベントハンドラ">
JavaScript
object.onresize = function(){ イベントハンドラ };
例
window
ウィンドウサイズを変更した時点にイベントハンドラを登録する場合。
window.onresize = function(){ イベントハンドラ };
サンプル
サイズを変更した回数:
サンプルについて
JavaScript上で動的にイベントハンドラを登録するタイプのサンプル。
サンプルの動作について
ウィンドウサイズを変更すると、「サイズを変更した回数:」の右横に、変更した回数を表示する。
サンプルのソースコード
JavaScript
<script type="text/javascript">
window.onresize = function () {
sample1resized();
}
var $count = 0;
function sample1resized() {
document.getElementById( "sample1output" ).innerHTML = ++$count + "回";
}
</script>
window.onresize = function () {
sample1resized();
}
var $count = 0;
function sample1resized() {
document.getElementById( "sample1output" ).innerHTML = ++$count + "回";
}
</script>
HTML
<p>サイズを変更した回数:<span id="sample1output"></span></p>