ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • jQuery - .resize()
    jQuery 2020. 6. 23. 18:16

    .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' 카테고리의 다른 글

    jQuery - .slice();  (0) 2020.06.23
    jQuery - .scrollTop()  (0) 2020.06.23
    jQuery - replaceWith()  (0) 2020.06.23
    jQuery - .prop()  (0) 2020.06.23
    jQuery - .parent()  (0) 2020.06.23

    댓글

Designed by Tistory.