ywork2020.com

Title

ウィンドウにリサイズイベントを登録する

目次 (INDEX)

resizeとは

ここで説明する resize とは次の語句からなるjQueryのメソッドです。
resize
読み: リサイズ
意味: 大きさを変えること。

目次に戻る

resizeメソッドの概要

このメソッドは、ブラウザのウィンドウ (window オブジェクト) にリサイズイベントをバインドします。 また、メソッドの引数を空にした場合には既にバインドされているリサイズイベントを呼び出します。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。

$(window).resize(Handler(EventObject));
$(window).resize([EventData], Handler(EventObject));
$(window).resize();
  • 01: リサイズイベントが発生した時点でハンドラーが実行されます。
  • 02: ハンドラーの引数であるイベントオブジェクトにデータを添付して実行します。
  • 03: セレクタにバインドしているリサイズイベントを呼び出します。

目次に戻る

サンプルコードと実行結果

ここでは、ブラウザのウィンドウサイズが変化した場合に、そのウィンドウの横幅と縦幅の取得を行い表示します。

また、モバイルのブラウザではウィンドウサイズを変化できるものは少ないと思いますので、ページ構成が終わった時点でもリサイズイベントを強制的に発動しています。

サンプルコード: HTML
<head>
	<style>...</style>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
	<output id="idOutput">innerText</output>
	<script>...</script>
</body>
  • 06: output (output要素です。この要素のコンテンツにウィンドウの横幅と縦幅を表示します。)
サンプルコード: script
<script>
	$(window).resize(function(){
		$("#idOutput").text($(this).innerWidth()+"×"+$(this).innerHeight());
	});
	$(document).ready(function(){
		$(window).resize();
	});
</script>
  • 02-04: $(window).resize(Handler(){処理}) (ここで window オブジェクトにリサイズイベントを登録しています。イベント発生時に {処理} の部分が実行されます。)
  • 05-07: $(document).ready(Handler(){処理}) (ここで document オブジェクトにレディーイベントを登録しています。イベント発生時に {処理} の部分が実行されます。このイベントはDOMの構成が完了した時点で実行されます。つまりページ要素(タグ)の構成がなされた時点ということなので画像などの置き換え要素は含まれません。処理の部分では既にバインドしているリサイズイベントを呼び出しています。)
実行結果:
innerText

目次に戻る