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>