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() 메서드를 사용합니다. 출력 참조:
Sheeraz is a Doctorate fellow in Computer Science at Northwestern Polytechnical University, Xian, China. He has 7 years of Software Development experience in AI, Web, Database, and Desktop technologies. He writes tutorials in Java, PHP, Python, GoLang, R, etc., to help beginners learn the field of Computer Science.
LinkedIn Facebook