jQuery resize()
方法用于在窗口或元素大小调整时触发事件。它可以用于检测浏览器窗口大小的变化,以便在需要时重新布局页面元素。
以下是resize()
方法的详细:
语法
$(window).resize(function)
或
$(selector).resize(function)
参数
function
:必需,当窗口或元素大小调整时要执行的函数。
示例1:检测浏览器窗口大小的变化
以下示例演示了如何使用resize()
检测浏览器窗口大小的变化:
<!DOCTYPE html>
<html>
>
<title>jQuery resize() Method</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
#myDiv {
width: 100%;
height: 200px;
background-color: yellow;
text-align: center;
font-size: 24px;
line-height: 200px;
}
</style>
</head>
<body>
div id="myDiv">Resize the window to see the effect</div>
<script>
$(window).resize(function() {
$('#myDiv').text('Window width: ' + $(window).width() + ', Window height: ' + $(window).height());
});
</script>
</body>
</html>
在上述示例中,我们使用resize()
方法检测浏览器窗口大小的变化,并在#myDiv
元素中显示窗口的宽度和高度。
示例2:检测元素大小的变化
以下示例演示了如何使用resize()
方法检测元素大小的变化:
<!DOCTYPE html>
<html>
<head>
<title>jQuery resize() Method</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
#myDiv {
width: 100%;
height: 200px;
background-color: yellow;
text-align: center;
font-size: 24px;
line-height: 200px;
}
</style>
</head>
<body>
<div id="myDiv">Resize the div to see the effect</div>
<script>
$('#myDiv').resize(function() {
$('#myDiv').text('Div width: ' + $(this).width() + ', Div height: ' + $(this).height());
});
</script>
</body>
</html>
在上述示例中,我们使用resize()
方法检测#myDiv
元素的大小变化,并在#myDiv
元素中显示其宽度和高度。
注意事项
jQuery resize()
方法用于在窗口或元素大小调整时触发事件。- 可以使用
$(window).resize()
方法检测浏览器窗口大小的变化。 - 可以使用
$(selector).resize()
方法检测元素大小的变化。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:jQuery resize()方法 - Python技术站