HOWTO · jQuery
jQuery の resize()メソッド
このチュートリアルでは、jQuery で resize()メソッドを使用する方法を示します。
resize() メソッドは、ブラウザウィンドウのサイズが変更されたときに使用される jQuery の組み込み関数です。このチュートリアルでは、jQuery で resize() メソッドを使用する方法を示します。
jQuery で resize() メソッドを使用する
resize() メソッドは、JavaScript の onresize() メソッドと同様に機能します。ウィンドウのサイズを変更するために使用されます。
resize() メソッドの構文は次のとおりです。
$(selector).resize(function)
selector にはウィンドウにすることができます。また、function は、resize() メソッドが呼び出されたときに呼び出されるオプションのパラメーターです。この function はハンドラーとも呼ばれます。
このイベントはサイズ変更が進行するまで継続的に送信される可能性があるため、ハンドラー内のコードは、ハンドラーが呼び出された回数に基づくべきではありません。このメソッドの戻り値は、サイズ変更された属性を持つ選択された要素です。
ここで、resize() メソッドは on("resize", handler) の jQuery バージョンであることにも注意してください。したがって、それと同様に、.off("resize") メソッドを使用してデタッチすることができます。
例を試してみましょう：
<!DOCTYPE html>
<html>
<head>
<title> jQuery resize() method </title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
<script>
var x = 0;
$(document).ready(function(){
$(window).resize(function(){
$("span").text(x += 1);
var Window_Size = "Width = " + $(window).width() + "<br/>Height = " + $(window).height();
$('#DemoParagraph').html(Window_Size);
});
});
</script>
<style>
span {
font-weight: bold;
color: blue;
font-size: 30px;
}
</style>
</head>
<body>
<h2> jQuery resize() method </h2>
<p> Resize your browser's window and see the Resize() method effect. </p>
<p> You have resized the window <span> 0 </span> times.</p>
<p id = "DemoParagraph"> </p>
</body>
</html>
上記のコードは、resize() メソッドを使用して、サイズ変更時にウィンドウの幅と高さを表示します。出力を参照してください：
