画面の幅がリサイズされた時に処理を実行する【jQuery】

画面が読み込まれた時だけでなく、画面幅がリサイズされた時にも処理を実行する時には「resize」を使います。

「resize」を使えば、画面幅をリアルタイムで表示することもできます。

画面幅を変えると赤いテキスト部分も変わるので試してみてください。

jQuery
$(window).on(‘load resize’, function(){
　var w = $(window).width();
　$(‘span’).text(w);
　$(‘span’).css(‘color’,’red’);
});

「load resize」と書くことによって読み込み時とリサイズ時の処理になりますが、リサイズ時だけの処理を記述するなら次のような書き方でもOKです。

$(window).resize(function(){
　//リサイズ時の処理
});