jQuery / Reference / .width()

개요

.width()는 선택한 요소의 가로 크기를 반환하거나, 가로 크기를 변경합니다.

문법 1

.width()
  • 선택한 요소의 가로 크기를 반환합니다. 예를 들어 다음은 p 요소의 가로 크기를 변수 jbVar에 저장합니다.
var jbVar = $( 'p' ).width();

문법 2

.width( value )
  • 선택한 요소의 가로 크기를 변경합니다. 예를 들어 다음은 h1 요소의 가로 크기를 100px로 만듭니다.
$( 'h1' ).width( '100px' );

예제 1

  • 선택한 요소의 가로 크기를 출력합니다. 가로 크기를 %로 지정해도 반환되는 값의 단위는 px입니다.
<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>jQuery</title>
    <style>
      div {
        border: 1px solid #dddddd;
        text-align: center;
      }
      .div-a {
        width: 600px;
      }
      .div-b {
        width: 50%;
      }
    </style>
    <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
    <script>
      jQuery( document ).ready( function() {
        var jbWidthDivA = $( '.div-a' ).width();
        $( '.width-div-a' ).append( jbWidthDivA );
        var jbWidthDivB = $( '.div-b' ).width();
        $( '.width-div-b' ).append( jbWidthDivB );
      } );
    </script>
  </head>
  <body>
    <div class="div-a">
      <p>A - 600px</p>
    </div>
    <p class="width-div-a"></p>
    <div class="div-b">
      <p>B - 50%</p>
    </div>
    <p class="width-div-b"></p>
  </body>
</html>

예제 2

  • 버튼을 클릭하면 요소의 가로 크기가 변합니다.
<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>jQuery</title>
    <style>
      div {
        border: 1px solid #dddddd;
        text-align: center;
      }
    </style>
    <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
    <script>
      jQuery( document ).ready( function() {
        $( '.width-div-a' ).click( function() {
          $( '.div-a' ).width( '500px' );
        } );
        $( '.width-div-b' ).click( function() {
          $( '.div-b' ).width( '50%' );
        } );
      } );
    </script>
  </head>
  <body>
    <div class="div-a">
      <p>To 500px</p>
    </div>
    <p><button class="width-div-a">Click</button></p>
    <div class="div-b">
      <p>To 50%</p>
    </div>
    <p><button class="width-div-b">Click</button></p>
  </body>
</html>

참고

  • 가로 크기는 내용 영역(Content Area)이 기준입니다. 즉, 박스 모델에서 바깥 여백 영역(Margin Area), 테두리 영역(Border Area), 안쪽 여백 영역(Padding Area)을 제외한 부분의 가로 크기입니다.
같은 카테고리의 다른 글
jQuery / Reference / .unwrap()

jQuery / Reference / .unwrap()

개요 .unwrap()은 선택한 요소의 상위 태그를 제거합니다. 문법 .unwrap() 예를 들어 다음은 h1 요소의 바로 상위의 태그를 제거합니다. $( 'h1' ).unwrap(); 예제 버튼을 크릭하면 h1 요소의 상위 태그인 div 태그를 제거합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> div { ...

jQuery / Reference / .after()

jQuery / Reference / .after()

개요 .after()는 선택한 요소 뒤에 새 요소를 추가하거나, 다른 곳에 있는 요소를 이동시킵니다. 문법 .after( content ) 예제 1 h1 요소 뒤에 Hello World!를 내용으로 갖는 p 요소를 추가합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <script src="//code.jquery.com/jquery-3.3.1.min.js"></script> <script> ...

jQuery / Reference / .slideDown()

jQuery / Reference / .slideDown()

개요 .slideDown()은 선택한 요소를 아래쪽으로 서서히 나타나게 합니다. 문법 .slideDown( ) duration 요소가 나타날 때까지 걸리는 시간입니다. 단위는 1/1000초, 기본값은 400입니다. fast나 slow로 정할 수 있습니다. fast는 200, slow는 600에 해당합니다. easing 요소가 나타나는 방식을 정합니다. swing과 linear가 가능하며, 기본값은 swing입니다. complete 요소가 나타난 후 수행할 작업을 정합니다. 예제 1 버튼을 클릭하면 파란색 배경의 div ...

jQuery / Reference / .before()

jQuery / Reference / .before()

개요 .before()는 선택한 요소 앞에 새 요소를 추가하거나, 다른 곳에 있는 요소를 이동시킵니다. 문법 .before( content ) 예제 1 p 요소 앞에 Lorem Ipsum Dolor를 내용으로 갖는 h1 요소를 추가합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <script src="//code.jquery.com/jquery-3.3.1.min.js"></script> <script> ...

jQuery / Reference / :button

jQuery / Reference / :button

:button은 type이 button인 요소를 선택하는 선택자입니다.

jQuery / Reference / .each()

jQuery / Reference / .each()

jQuery의 .each() 함수는 주로 배열, 객체, 또는 jQuery 선택자로 선택된 요소 집합에 대해 반복 작업을 수행하기 위해 사용됩니다. JavaScript의 for 또는 forEach 루프와 유사하지만, jQuery의 특성과 통합된 방식으로 작동합니다.

jQuery / Reference / .find()

jQuery / Reference / .find()

개요 .find()는 어떤 요소의 하위 요소 중 특정 요소를 찾을 때 사용합니다. 문법 .find( selector ) 예를 들어 다음은 h1 요소의 하위 요소 중 span 요소를 선택합니다. $( 'h1' ).find( 'span' ) 예제 클래스 값으로 b를 갖는 p 요소의 하위 요소 중 클래스 값으로 ip를 갖는 span 요소를 찾아서 글자 크기를 2배로 만듭니다. <!doctype html> <html lang="ko"> <head> ...

jQuery / Reference / .css()

jQuery / Reference / .css()

개요 .css()로 선택한 요소의 css 속성값을 가져오거나 style 속성을 추가할 수 있습니다. 문법 1 - 속성의 값 가져오기 .css( propertyName ) propertyName의 속성값을 가져옵니다. 예를 들어 다음은 h1 요소의 스타일 중 color 속성의 값을 가져옵니다. $( "h1" ).css( "color" ); 문법 2 - 속성 추가하기 .css( propertyName, value ) style 속성을 추가합니다. 예를 들어 다음은 h1 요소에 style 속성을 ...

jQuery / Reference / .prependTo()

jQuery / Reference / .prependTo()

개요 .prependTo()는 선택한 요소를 다른 요소의 시작 태그 뒤로 이동시킵니다. 문법 .prependTo( target ) 예제 abc를 클래스 값으로 가지는 span 요소를 h1 요소의 <h1> 뒤로 이동시킵니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> body { ...

jQuery / Reference / .remove()

jQuery / Reference / .remove()

개요 .remove()는 선택한 요소를 HTML 문서에서 제거합니다. 문법 .remove( ) 특정 선택자를 가진 요소를 제거할 때는 괄호 안에 선택자를 넣습니다. 예를 들어 다음은 클래스 값으로 rm을 가진 p 요소를 제거합니다. $( 'p' ).remove( '.rm' ); 다음과 같이 해도 결과는 같습니다. $( 'p.rm' ).remove(); 예제 버튼을 클릭하면 rm을 클래스 값으로 가지는 h1 요소를 제거합니다. <!doctype html> <html lang="ko"> <head> ...