.width()
.width()는 선택한 요소의 가로 크기를 반환하거나, 가로 크기를 변경합니다.
기본형 1
.width()
선택한 요소의 가로 크기를 반환합니다. 예를 들어
var Var = $( 'p' ).width();
는 p 요소의 가로 크기를 변수 Var에 저장합니다.
기본형 2
width( value )
선택한 요소의 가로 크기를 변경합니다. 예를 들어
$( 'h1' ).width( '100px' );
는 h1 요소의 가로 크기를 100px로 만듭니다.
예제 1
선택한 요소의 가로 크기를 출력합니다. 가로 크기를 %로 지정해도 반환되는 값의 단위는 px입니다.
<div class="div-a">
<p>A - 200px</p>
</div>
<p class="width-div-a"></p>
<div class="div-b">
<p>B - 100%</p>
</div>
<p class="width-div-b"></p>
div {
border: 1px solid #dddddd;
text-align: center;
}
.div-a {
width: 200px;
}
.div-b {
width: 100%;
}
>
jQuery( document ).ready( function() {
var WidthDivA = $( '.div-a' ).width();
$( '.width-div-a' ).append( WidthDivA );
var WidthDivB = $( '.div-b' ).width();
$( '.width-div-b' ).append( WidthDivB );
});
예제 2
버튼을 클릭하면 요소의 가로 크기가 변합니다.
<div class="div-a">
<p>To 100px</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>
div {
border: 1px solid #dddddd;
text-align: center;
}
jQuery( document ).ready( function() {
$( '.width-div-a' ).click( function() {
$( '.div-a' ).width( '100px' );
});
$( '.width-div-b' ).click( function() {
$( '.div-b' ).width( '50%' );
});
});