.width() - 선택한 요소의 가로 크기를 반환하거나, 가로 크기를 변경하는 메서드

jQuery

.width()

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

문법 1

.width()

선택한 요소의 가로 크기를 반환합니다. 예를 들어

var jbVar = $( 'p' ).width();

는 p 요소의 가로 크기를 변수 jbVar에 저장합니다.

문법 2

.width( value )

선택한 요소의 가로 크기를 변경합니다. 예를 들어

$( 'h1' ).width( '100px' );

는 h1 요소의 가로 크기를 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 / 동적 셀렉트(select) 만드는 방법

앞의 select에서 선택을 하면, 그 값에 따라 뒤의 select의 선택 항목이 바뀌게 하는 것을 동적 셀렉트라고 하는 거 같다. 예를 들어 앞의 select에서 서울을 선택하면, 뒤의 select의 option이 강남구, 송파구 등으로 바뀌는 것. 아래는 jQuery를 이용해서 만든 간단한 동적 셀렉트 예제이다. onchange을 이용하여 값의 변화를 인식하고 optionChange() 함수를 실행한다. 변수 a에는 A를 선택했을 ...

jQuery / 천 단위 쉼표 만드는 방법

예제 1 텍스트로 출력된 숫자에 천 단위 쉼표를 넣는다. <!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> $( document ).ready( function() { $( '#jb' ).text( ...

jQuery / 스크롤해도 상단에 고정되는 메뉴 만들기

상단 고정 메뉴 웹페이지의 내용이 많으면 아래로 스크롤해서 보게 됩니다. 그러면 페이지에 있는 모든 내용이 움직이고 상단에 있는 메뉴도 위로 사라지게 됩니다. 이렇게 되면 페이지의 내용을 다 보고 다른 메뉴로 이동하려 할 때 다시 문서의 위로 스크롤해서 올라가야 하는 불편이 있습니다. 모바일 기기에서라면 더욱 불편합니다. 이 불편을 해소하는 방법 중의 하나가 메뉴를 고정시키는 ...

jQuery / Method / .css() - 선택한 요소의 css 속성값을 가져오거나, 속성을 추가하는 메서드

.css()로 선택한 요소의 css 속성값을 가져오거나 style 속성을 추가한다. 문법 1 - 속성의 값 가져오기 propertyName의 속성값을 가져온다. .css( propertyName ) 예를 들어 아래는 h1 요소의 스타일 중 color 속성의 값을 가져온다. $( "h1" ).css( "color" ); 문법 2 - 속성 추가하기 style 속성을 추가한다. .css( propertyName, value ) 예를 들어 아래는 h1 요소에 style 속성을 추가하여 글자색을 녹색으로 ...

jQuery / Method / .scrollTop() - 선택한 요소의 스크롤바 수직 위치를 반환하거나 스크롤바 수직 위치를 정하는 메서드

.scrollTop() .scrollTop()은 선택한 요소의 스크롤바 수직 위치를 반환하거나 스크롤바 수직 위치를 정합니다. 문법 1 .scrollTop() 스크롤바 수직 위치를 가져옵니다. 예를 들어 $( 'div' ).scrollTop(); 는 div 요소의 스크롤바 수직 위치를 가져옵니다. 문법 2 .scrollTop( value ) 스크롤바 수직 위치를 정합니다. 예를 들어 $( 'div' ).scrollTop( 300 ); 은 div 요소의 스크롤바 위치를 위에서 300px로 정합니다. 예제 1 버튼을 클릭하면 div 요소의 스크롤바 위치를 ...

jQuery / Method / .unwrap() - 선택한 요소의 상위 태그를 제거하는 메서드

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

jQuery / input 값 변화 감지하기 / change, keyup

input 요소에 값을 입력하거나 선택했을 때, 이를 감지하여 어떤 작업을 할 수 있다. input의 type이 number일 때, checkbox일 때, radio일 때로 나누어서 어떻게 감지하는지 알아본다. input type="number" 숫자를 입력할 수 있는 폼 두 개를 만들고, 값을 입력했을 때 두 수의 곱을 출력해보자. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...

jQuery / Method / .before() - 선택한 요소 앞에 새 요소를 추가하거나, 다른 곳에 있는 요소를 이동시키는 메서드

.before() .before()는 선택한 요소 앞에 새 요소를 추가하거나, 다른 곳에 있는 요소를 이동시킬 수 있습니다. 문법 .before( content ) 예를 들어 $( 'h1' ).before( '<p>Hello</p>' ); 는 h1 요소 앞에 Hello를 내용으로 갖는 p 요소를 추가합니다. $( 'h1.a' ).before( $( 'p.b' ) ); 는 클래스 값으로 a를 갖는 h1 요소 앞에 클래스 값으로 b를 갖는 ...

jQuery / Selector / :checked - 체크박스, 라디오 버튼에서 체크한 요소 선택하는 선택자

:checked는 체크박스(checkbox)에서 선택한 요소, 라디오 버튼(radio)에서 선택한 요소, 선택 목록(select)에서 선택한 요소(option)를 선택하는 선택자이다. 예제 1 - 라디오 버튼 색을 선택하면, div 요소의 배경색을 바꾼다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> * { ...

jQuery / Selector / :contains() - 특정 문자열을 포함한 요소를 선택하는 선택자

:contains()는 특정 문자열을 포함한 요소를 선택하는 선택자이다. 문법 문자열 포함 여부를 따질 때 대소문자를 구분한다는 점에 주의한다. $( ':contains( text )' ) 예를 들어 다음은 ab 문자열을 포함한 p 요소를 선택한다. $( 'p:contains( "ab" )' ) 예제 jb를 포함한 p 요소를 선택해서 글자를 빨간색으로 만든다. 첫번째 문단은 jb가 없어서, 세번째 문단은 jb가 있지만 대문자여서 선택되지 않는다. <!doctype html> <html lang="ko"> ...

CODING FACTORY