outerHeight 메서드

outerHeight 메서드는 요소의 내부 여백, 테두리 및 선택적으로 외부 여백을 포함한 높이를 가져오거나 변경할 수 있게 합니다. 중요한 점은 '계산된 높이' 값(computed height)을 받게 된다는 것입니다. 사용자가 페이지 크기를 변경하거나 요소나 그 부모 요소가 숨겨져 있는 경우에도 계산 오류가 발생할 수 있습니다.

구문

이렇게 하면 요소의 높이를 얻을 수 있습니다. 이 메서드는 true 또는 false (기본값은 false)의 선택적 매개변수를 받을 수 있으며, 이는 외부 여백을 포함할지 여부에 따라 달라집니다. 일부 경우 얻은 값은 소수일 수 있습니다:

$(selector).outerWidth([includeMargin]);

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

$(selector).outerHeight(newValue, [includeMargin]);

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

$(selector).outerHeight(function(index, currentHeight));

예제

비교를 위해 단락 #test의 높이 정보를 height, innerHeight 및 outerHeight 메서드로 얻은 결과를 출력해 봅시다:

<p id="test">텍스트</p>
<p id="out1"></p>
<p id="out2"></p>
<p id="out3"></p>
<p id="out4"></p>

p {
	margin: 10px;
	padding: 5px;
	border: 2px solid blue;
}

let h1 = $('#test').height();
let h2 = $('#test').innerHeight();
let h3 = $('#test').outerHeight();
let h4 = $('#test').outerHeight(true);

$('#out1').text(h1);
$('#out2').text(h2);
$('#out3').text(h3);
$('#out4').text(h4);

함께 보기

height 메서드,
요소의 높이를 가져오거나 변경할 수 있게 합니다.
innerHeight 메서드,
요소의 내부 여백을 고려한 높이를 가져오거나 변경할 수 있게 합니다.