【jQuery】resize()で画面幅がリサイズ時の処理方法を解説

jQueryには画面幅を変更することでイベントが発火するresizeイベントがあります。

resizeイベントが扱えるようになると、画面幅に応じて、サイト内のタグを入れ替えたり、画面サイズを取得したりすることができます。

様々なイベントを学ぶことで制作の幅が広がるので、知識として身に付けていきましょう！

この記事では「jQueryのresizeイベントの使い方」について解説します。

resize()イベントの使い方

jQueryのresizeイベントは、jQueryのイベントの一つ。resize()は画面幅を変更するとイベントが発火します。

基本書式

$(window).resize(function(){
  // 画面幅が変更されたときに実行させたい処理内容
});

上の書式にコードを当てはめると次のようになります。

$(window).resize(function () {
  console.log("resize!");
});

出力結果

画面幅を変更すると、コンソール画面でメッセージが表示されます。この場合、横幅・縦幅どちらを変更してもイベント発火します。

画面の横幅サイズを取得して表示する

resizeイベントを使って、画面の横幅サイズを取得して表示することができます。例えば、画面の横幅を取得する場合は次のようになります。

<p class="width">横幅：<span></span></p>

$(window).resize(function () {
  const width = $(window).width();
  $('.width span').text(width + 'px');
});

出力結果

$(window).width()で画面幅を設定して変数に格納します。画面幅が変更されると、textメソッドで画面幅サイズが出力されます。

画面高さのサイズを取得して表示する

resizeイベントを使って、画面高さのサイズを取得して表示することができます。例えば、画面の高さを取得する場合は次のようになります。

<p class="height">縦幅：<span></span></p>

$(window).resize(function () {
  const height = $(window).height();
  $('.height span').text(height + 'px');
});

出力結果

$(window).height()で画面高さを設定して変数に格納します。画面高さが変更されると、textメソッドで画面高さのサイズが出力されます。

まとめ

jQueryのresize()イベントは画面サイズが変わるとイベントが発火します。画面サイズを数字で取得したい場合には便利です。画面幅が変わったら処理をリセットするなどできるようになるので、活用していきましょう。

jQueryのreize()イベントまとめ

• resize()：画面サイズ（横幅・高さ）が変わるとイベント発火
• $(window).width;で画面幅を設定できる
• $(window).height;で画面高さを設定できる

\ 学んだことをSNSでシェアしよう /

facebook

X

LINE

ハテブ

Pocket

URL
copy

コピー