jQuery / 선택한 요소의 가로 크기 가져오기 - width, innerWidth, outerWidth

jQuery의 width, innerWidth, outerWidth로 특정 요소의 가로 크기를 가져올 수 있습니다.

  • width - padding 안쪽 크기
  • innerWidth - border 안쪽 크기
  • outerWidth - border 포함 크기

다음은 padding과 margin을 추가하면서 각 값이 어떻게 변하는지 알아보는 예제입니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>jQuery</title>
    <style>
      div {
        border: 1px solid #444444;
      }
      div.a {
        width: 500px;
      }
      div.b {
        width: 500px;
        padding: 10px;
      }
      div.c {
        width: 500px;
        padding: 10px;
        margin: 10px;
      }
    </style>
    <script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
    <script>
      $( document ).ready( function() {
        var jbWidth1 = $( 'div.a' ).width();
        var jbInnerWidth1 = $( 'div.a' ).innerWidth();
        var jbOuterWidth1 = $( 'div.a' ).outerWidth();
        $( 'div.a' ).after( '<p>Width = ' + jbWidth1 + ', Inner Width = ' + jbInnerWidth1 + ', Outer Width = ' + jbOuterWidth1 + '</p>' );
        var jbWidth2 = $( 'div.b' ).width();
        var jbInnerWidth2 = $( 'div.b' ).innerWidth();
        var jbOuterWidth2 = $( 'div.b' ).outerWidth();
        $( 'div.b' ).after( '<p>Width = ' + jbWidth2 + ', Inner Width = ' + jbInnerWidth2 + ', Outer Width = ' + jbOuterWidth2 + '</p>' );
        var jbWidth3 = $( 'div.c' ).width();
        var jbInnerWidth3 = $( 'div.c' ).innerWidth();
        var jbOuterWidth3 = $( 'div.c' ).outerWidth();
        $( 'div.c' ).after( '<p>Width = ' + jbWidth3 + ', Inner Width = ' + jbInnerWidth3 + ', Outer Width = ' + jbOuterWidth3 + '</p>' );
      } );
    </script>
  </head>
  <body>
    <div class="a">
      <p>border 1px, width 500px</p>
    </div>
    <div class="b">
      <p>border 1px, width 500px, padding 10px</p>
    </div>
    <div class="c">
      <p>border 1px, width 500px, padding 10px, margin 10px</p>
    </div>
  </body>
</html>

Related Posts

jQuery / Method / .children() - 어떤 요소의 자식 요소를 선택하는 메서드

jQuery / Method / .children() - 어떤 요소의 자식 요소를 선택하는 메서드

.children() .children()은 어떤 요소의 자식 요소를 선택합니다. 문법 .children( ) 예를 들어 $( 'div' ).children().css( 'color', 'blue' ); 는 div 요소의 자식 요소의 색을 파란색으로 만듭니다. $( 'div' ).children( 'p.bl' ).css( 'color', 'blue' ); 는 div 요소의 자식 요소 중 클래스 값으로 bl을 가진 p 요소의 색을 파란색으로 만듭니다. 예제 ul 요소의 자식 요소 중 ip를 클래스 값으로 가지는 ...

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

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

.width() .width()는 선택한 요소의 가로 크기를 반환하거나, 가로 크기를 변경합니다. 문법 1 .width() 선택한 요소의 가로 크기를 반환합니다. 예를 들어 var jbVar = $( 'p' ).width(); 는 p 요소의 가로 크기를 변수 jbVar에 저장합니다. 문법 2 .width( value ) 선택한 요소의 가로 크기를 변경합니다. 예를 들어 $( 'h1' ).width( '100px' ); 는 h1 요소의 가로 크기를 100px로 만듭니다. 예제 1 선택한 요소의 가로 ...

jQuery / Method / .detach() - 선택한 요소를 문서에서 제거하고 저장하는 메서드

jQuery / Method / .detach() - 선택한 요소를 문서에서 제거하고 저장하는 메서드

.detach() .detach()는 선택한 요소를 문서에서 제거합니다. 제거한다는 면에서는 .remove()와 같으나, .detach()는 제거한 요소를 저장하여 다시 사용할 수 있습니다. 문법 .detach( ) 예를 들어 var jb = $( 'h1' ).detach(); 는 h1 요소를 문서에서 제거하고 변수 jb에 저장합니다. 예제 Cut 버튼을 클릭하면 Dolor를 잘라내고, Paste 버튼을 클릭하면 Ipsum 위에 붙여넣습니다. <!doctype html> <html lang="ko"> <head> ...

jQuery / Method / .clone() - 선택한 요소를 복제하는 메서드

jQuery / Method / .clone() - 선택한 요소를 복제하는 메서드

.clone() .clone()은 선택한 요소를 복제합니다. 문법 .clone( ) 예를 들어 $( '.ab' ).clone().appendTo( 'h1' ); 은 ab를 클래스 값으로 가지는 요소를 복제하여 h1 요소에 넣습니다. 예제 span 요소를 복제하여 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 / Selector / :odd - 홀수 인덱스 요소를 선택하는 선택자

jQuery / Selector / :odd - 홀수 인덱스 요소를 선택하는 선택자

:odd :odd은 홀수 인덱스 요소를 선택하는 선택자입니다. 문법 $( ':odd' ) 예를 들어 $( 'p:odd' ) 는 홀수 인덱스인 p 요소를 선택합니다. 주의할 점은 인덱스가 0부터 시작한다는 것입니다. 예제 <!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 / Method / .hover()

jQuery / Method / .hover()

.hover() .hover()로 선택한 요소에 마우스 포인터를 올렸을 때, 그리고 마우스 포인터가 그 요소를 벗어났을 때 어떤 효과를 넣을 수 있습니다. 문법 .hover( handlerIn(eventObject), handlerOut(eventObject) ) handlerIn(eventObject)에는 요소에 마우스 포인터를 올렸을 때의 효과를, handlerOut(eventObject)에는 마우스 포인터가 요소를 벗어났을 때의 효과를 넣습니다. 예제 span 요소에 마우스 포인터를 올리면 글자가 커지고, 포인터가 벗어나면 다시 원래대로 돌아옵니다. <!doctype html> <html lang="ko"> ...

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

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> ...

jQuery / 선택한 요소의 가로 크기 가져오기 - width, innerWidth, outerWidth

jQuery / 선택한 요소의 가로 크기 가져오기 - width, innerWidth, outerWidth

jQuery의 width, innerWidth, outerWidth로 특정 요소의 가로 크기를 가져올 수 있습니다. width – padding 안쪽 크기 innerWidth – border 안쪽 크기 outerWidth – border 포함 크기 다음은 padding과 margin을 추가하면서 각 값이 어떻게 변하는지 알아보는 예제입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> ...

jQuery / Method / .get() - 선택한 요소를 배열로 가져오는 메서드

jQuery / Method / .get() - 선택한 요소를 배열로 가져오는 메서드

.get() .get()은 선택한 요소를 배열(Array)로 가져옵니다. 문법 .get() 선택한 모든 요소를 가져옵니다. .get( index ) 선택한 요소 중 특정한 것만 가져옵니다. 예제 1 모든 li 요소를 jb 배열로 가져온 후, 각 요소의 내용을 출력합니다. <!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 / Method / .fadeIn() - 선택한 요소를 서서히 나타나게 하는 메서드

jQuery / Method / .fadeIn() - 선택한 요소를 서서히 나타나게 하는 메서드

.fadeIn() .fadeIn()은 선택한 요소를 서서히 나타나게 합니다. 문법 .fadeIn( ) duration duration에는 완전히 나타날 때까지의 시간이 들어갑니다. fast, slow로 정하거나 400 같은 숫자로 정할 수 있습니다. 숫자일 경우 단위는 1000분의 1초이며, fast는 200, slow는 600에 해당합니다. 아무것도 입력하지 않으면 기본값 400으로 설정됩니다. 문자로 시간을 정할 때는 따옴표 안에 ...

jQuery 강좌