Jquery resize()方法
Jquery resize()方法
当浏览器窗口的大小更改时，jQuery
resize()方法将触发一个resize事件。它绑定事件处理程序以调整事件大小或在元素上触发该事件。此方法可用于执行一些必需的操作，例如在调整窗口大小时调整页面元素时避免滚动条等等。
resize()方法将触发一个resize事件。它绑定事件处理程序以调整事件大小或在元素上触发该事件。此方法可用于执行一些必需的操作，例如在调整窗口大小时调整页面元素时避免滚动条等等。
如果触发了resize事件且元素的尺寸发生变化，则其中的内容元素也会随之调整。
语法
$(selector).resize(function)
此方法接受可选参数
function ，该参数指定每次触发大小调整事件时要执行的函数。
function ，该参数指定每次触发大小调整事件时要执行的函数。
现在，让我们请参阅使用jQuery
resize()方法的示例。
resize()方法的示例。
示例
在此示例中，我们使用
resize()方法。在这里，我们使用
resize()方法的可选参数。当用户调整窗口大小时，更新后的窗口宽度和高度将显示在屏幕上。它还将显示用户尝试调整窗口大小的次数。
resize()方法。在这里，我们使用
resize()方法的可选参数。当用户调整窗口大小时，更新后的窗口宽度和高度将显示在屏幕上。它还将显示用户尝试调整窗口大小的次数。
当我们更改窗口的高度时，更新的高度将相应地更改。同样，当我们更改窗口的宽度时，更新的宽度也会相应地更改。
<!DOCTYPE html>
<html>
<head>
<title> jQuery resize() method </title>
<script src = "/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
<script>
var i = 0;
$(document).ready(function(){
$(window).resize(function(){
$("span").text(i += 1);
var res = "Width = " + $(window).width() + "<br/>Height = " + $(window).height();
$('#para').html(res);
});
});
</script>
<style>
span {
font-weight: bold;
color: red;
font-size: 20px;
}
</style>
</head>
<body>
<h2> This is an example of using the jQuery resize() method. </h2>
<p> Try to resize your browser's window to see the effect. </p>
<p> You have resized the window <span id = "s1"> 0 </span> times.</p>
<p id = "para"> </p>
</body>
</html>
输出:
成功执行上述代码后，输出为-
当我们尝试调整窗口大小时，输出为-
