-
jQuery - .width()jQuery 2020. 6. 23. 19:43
.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>'jQuery' 카테고리의 다른 글
jQuery - .val() (0) 2020.06.23 jQuery - .unwrap() (0) 2020.06.23 jQuery - .toggleClass() (0) 2020.06.23 jQuery - .toggle() (0) 2020.06.23 jQuery - .text() (0) 2020.06.23