• Q&A
  • 회원가입
  • 로그인

[Event] JQ - resize() 메서드 - 창크기변경이벤트 (= 윈도우창 리사이즈이벤트 = resize메서드 = 리사이즈 메서드)

347  

목차

  1. resize() 예제 - 창 크기 변동 자동 감지
  2. resize() 예제 - 창 크기 변동 자동 감지 + 수동 촉발
  3. resize() 정의
  4. resize() 구문

 

resize() 예제 - 창 크기 변동 자동 감지

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script>

var x = 0;

$(document).ready(function(){

  $(window).resize(function(){ // 창 크기 변경 자동 감지

    $("span").text(x += 1);

  });

});

</script>


<p>창크기 <span>0</span> 번 변경</p>

 

결과보기

 

resize() 예제 - 창 크기 변동 자동 감지 + 수동 촉발

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script>

var x = 0;

$(document).ready(function(){

  $(window).resize(function(){ // 창 크기 변동 자동 감지

    $("span").text( x+= 1);

  });

  $("button").click(function(){ // 창 크기 변동 수동 촉발

    $(window).resize();

  });

});

</script>

 

<p>창크기 <span>0</span> 번 변경</p>

 

<button>클릭</button>

 

결과보기

 

resize() 정의

 

resize 이벤트는 브라우저 창 크기 변경될 때 이벤트 발생.
※ resize() 메서드는 아래 2가지 역할 가능.

① resize 이벤트 촉발.

② resize 이벤트 발생 시 실행할 함수 부착.

 

 

resize() 구문

 

resize 이벤트 촉발

$(selector).resize()

  

resize 이벤트에 함수 부착.

$(selector).resize(function)

 


[매개변수]

 

function

선택. resize 이벤트 발생 때 실행할 함수 지정.

 



찾아주셔서 감사합니다. Since 2012