innerHeight 메서드

innerHeight 메서드는 요소의 내부 패딩을 고려한 높이를 얻고 변경할 수 있게 합니다. '계산된 높이' (computed height)를 얻을 것임을 기억하는 것이 중요합니다. 사용자가 페이지 크기를 변경하거나, 요소 또는 그 부모가 숨겨진 경우에도 계산 오류가 발생할 수 있습니다. 높이 값은 요소의 테두리 두께를 고려하지 않습니다.

구문

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

$(선택자).innerHeight();

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

$(선택자).innerHeight(새 값);

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

$(선택자).innerHeight(function(세트 내 인덱스, 현재 높이 값));

예제

비교를 위해 #test 단락의 높이 정보를 height 메서드와 innerHeight 메서드로 얻어 출력해 봅시다:

<p id="test">text</p>
<p id="out1"></p>
<p id="out2"></p>

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

let h1 = $('#test').height();
let h2 = $('#test').innerHeight();

$('#out1').text(h1);
$('#out2').text(h2);

10px의 차이를 볼 수 있는데, 이는 우리가 설정한 상단 및 하단 내부 패딩의 합계입니다.

함께 보기

메서드 height,
요소의 높이를 얻고 변경할 수 있게 합니다
메서드 outerHeight,
요소의 패딩과 테두리를 고려한 높이를 얻고 변경할 수 있게 합니다