jQueryオブジェクト .resize()

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

目次

  1. 構文
  2. 引数
  3. 例
  4. 関連項目
  5. 参考文献

構文

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

jQueryObject.resize()

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

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

引数

jQueryObject
jQueryオブジェクト
event
イベントオブジェクト

例

HTML

<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>

JavaScript

$(window).resize(function(){
  $('#ih').text(window.innerWidth)
  $('#iw').text(window.innerHeight)
  $('#oh').text(window.outerWidth)
  $('#ow').text(window.outerHeight)
})
$(window).resize()

実行結果

window
プロパティ 値
innerWidth
innerHeight
outerWidth
outerHeight

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

JavaScript

var timer = false;

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

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

関連項目

参考文献