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>

jQuery 강좌