width 메서드

width 메서드는 요소의 너비를 얻고 변경할 수 있도록 합니다. 중요한 점은 우리가 '계산된 너비' 값을 얻는다는 것입니다 (computed width). css('width') 메서드와 달리, 이 메서드는 단위 없는 값을 반환합니다 (예: 400) 따라서 수학적 계산에 편리합니다. 이 메서드는 CSS 속성 box-sizing의 지정 여부와 관계없이 요소 콘텐츠의 너비를 얻습니다. 이로 인한 불편함을 피하려면 css('width') 사용을 권장합니다. 계산 오류는 사용자가 페이지 크기를 변경하거나, 요소 또는 그 부모 요소가 숨겨져 있는 경우에도 발생할 수 있습니다. 너비 값은 패딩과 테두리 값을 고려하지 않습니다.

문법

요소의 너비를 얻습니다. 경우에 따라 얻은 값이 소수일 수 있습니다:

$(selector).width();

요소의 너비를 변경하려면 - 단순히 숫자를 전달할 수 있습니다 (예: 400), 이 경우 단위는 픽셀이 되며, 또는 단위를 명시한 문자열을 전달할 수 있습니다 (예: '10em'):

$(selector).width(new value);

또한 주어진 함수를 세트의 각 요소에 적용할 수 있습니다. 이때 함수의 첫 번째 매개변수는 세트 내 요소의 인덱스가 되고, 두 번째 매개변수는 특정 요소에 대해 설정된 현재 너비 값이 됩니다. 함수 내의 this 값은 현재 요소를 가리킵니다. 요소의 너비는 함수가 반환하는 값으로 변경됩니다:

$(selector).width(function(index in set, current width value));

예제

div를 클릭할 때 width 메서드를 사용하여 너비를 40px로 변경하고, css를 사용하여 배경을 초록색으로 변경해 봅시다:

<div id="test"></div>

#test {
	width: 90px; 
	height: 80px;
	background: red; 
	color: white;
	margin-top: 10px; 
	cursor: pointer;
}

$('#test').one('click', function() {
	$(this).width(40).css({
		cursor: 'auto',
		backgroundColor: 'green'
	});
});

함께 보기

요소의 높이를 얻고 변경할 수 있는 height 메서드
요소의 내부 패딩을 고려한 너비를 얻고 변경할 수 있는 innerWidth 메서드
요소의 패딩과 테두리를 고려한 너비를 얻고 변경할 수 있는 outerWidth 메서드
요소의 CSS 스타일을 얻고 변경할 수 있는 css 메서드