JavaScript에서 요소의 최대 높이를 설정하려면 maxHeight 속성을 사용하면 됩니다. 이 속성은 CSS의 max-height 스타일에 대응하며, 요소가 지정된 높이 이상으로 늘어나지 않도록 제한하는 역할을 합니다.
예제
아래 코드를 실행한 후 버튼을 클릭하면, div 요소의 최대 높이가 70px로 설정되어 내용이 잘리는 것을 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
#box {
width: 300px;
background-color: gray;
overflow: auto;
}
</style>
</head>
<body>
<p>아래 버튼을 클릭하면 최대 높이가 설정됩니다.</p>
<button type="button" onclick="display()">Max Height</button>
<div id="box">
<p>This is a div. This is a div. This is a div.<p>
<p>This is a div. This is a div. This is a div.<p>
<p>This is a div. This is a div. This is a div.<p>
<p>This is a div. This is a div. This is a div.<p>
<p>This is a div. This is a div. This is a div.<p>
</div>
<br>
<script>
function display() {
document.getElementById("box").style.maxHeight = "70px";
}
</script>
</body>
</html>위 예제에서 핵심은 document.getElementById("box").style.maxHeight = "70px"; 부분입니다. 자바스크립트의 style.maxHeight 속성에 원하는 값을 픽셀(px) 단위 문자열로 할당하면 해당 요소의 최대 높이가 즉시 적용됩니다. 또한 컨테이너에 overflow: auto; 스타일을 함께 지정하면, 내용이 최대 높이를 초과할 경우 스크롤바가 자동으로 생성되어 나머지 내용도 확인할 수 있습니다.