jQueryオブジェクト .resize()

ウィンドウのサイズが変更されたときに発生する resize イベントを発生（トリガー）させたり、resize イベントが発生したときに実行する関数（ハンドラ）を設定（バインド）する。

使い方

resize イベントを発生させる。

jQueryObject.resize()

resize イベントが発生したときに実行する関数を指定する。

jQueryObject.resize(function(event){
  /* do something */
})

jQueryObject

jQueryオブジェクト

event

イベントオブジェクト

サンプル

<table>
  <caption>window</caption>
  <thead>
    <tr>
      <th>プロパティ</th>
      <th>値</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>innerWidth</td>
      <td id="iw"></td>
    </tr>
    <tr>
      <td>innerHeight</td>
      <td id="ih"></td>
    </tr>
    <tr>
      <td>outerWidth</td>
      <td id="ow"></td>
    </tr>
    <tr>
      <td>outerHeight</td>
      <td id="oh"></td>
    </tr>
  </tbody>
</table>
<script>
  $(window).resize(function(){
    $('#ih').text(window.innerWidth)
    $('#iw').text(window.innerHeight)
    $('#oh').text(window.outerWidth)
    $('#ow').text(window.outerHeight)
  })
  $(window).resize()
</script>

上記の例では、何回も呼ばれることがある。リサイズ操作が終わった時にだけ処理を実行する例を示す。

var timer = false;

$(window).resize(function(){
  if (timer !== false){
    clearTimeout(timer);
  }

  timer = setTimeout(function(){
    console.log(window.innerWidth);
    console.log(window.innerHeight);
  }, 200);
});

参考文献

OpenJS Foundation and jQuery contributors (2022) .resize()