height 메서드

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

문법

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

$(selector).height();

요소의 높이를 변경하려면 단순히 숫자(예: 400)를 전달할 수 있으며, 이때 단위는 픽셀이 됩니다. 또는 단위를 지정한 문자열 (예: '10em')을 전달할 수도 있습니다:

$(selector).height(new value);

지정된 함수를 집합의 각 요소에 적용할 수도 있습니다. 이때 함수의 첫 번째 매개변수는 집합 내 요소의 인덱스이고, 두 번째 매개변수는 해당 요소의 현재 높이 값입니다. 함수 내부의 this는 현재 요소를 가리킵니다.

요소의 높이 값은 함수가 반환하는 값으로 변경됩니다:

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

예제

#test를 클릭할 때 height 메서드를 사용하여 높이를 30px로 변경하고, css를 사용하여 배경을 녹색으로 변경해 보겠습니다:

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

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

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

같이 보기

width 메서드,
요소의 너비를 얻거나 변경할 수 있게 합니다.
innerHeight 메서드,
요소의 내부 패딩을 포함한 높이를 얻거나 변경할 수 있게 합니다.
outerHeight 메서드,
요소의 패딩과 테두리를 포함한 높이를 얻거나 변경할 수 있게 합니다.
css 메서드,
요소의 CSS 스타일을 얻거나 변경할 수 있게 합니다.