jQuery / Method / .resize() - 윈도우 크기 변할 때 어떤 작업하기

.resize()

.resize()는 윈도우 크기가 바뀔 때 어떤 작업을 할 수 있게 합니다.

문법

$( window ).resize( function() {
  // do somthing
​} );

예제

웹브라우저의 크기를 변경할 때, p 요소의 가로폭을 출력합니다. 윈도우 크기를 변경하면 숫자가 바뀝니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>jQuery</title>
    <style>
      p {
        width: 80%;
        margin: auto;
        padding: 20px;
        text-align: center;
        border: 1px solid #bcbcbc;
      }
    </style>
    <script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
    <script>
      $( document ).ready( function() {
        var jbWidth = $( 'p' ).width();
        $( 'p' ).append( jbWidth );
        $( window ).resize( function() {
          jbWidth = $( 'p' ).width();
          $( 'p' ).empty().append( jbWidth );
        } );
      } );
    </script>
  </head>
  <body>
    <p></p>
  </body>
</html>

jQuery 강좌