HTML 요소의 높이를 설정하려면 JavaScript에서 height 속성을 사용하면 됩니다. 이 속성은 element.style.height 형태로 접근하며, 픽셀(px)과 같은 단위를 포함한 값으로 원하는 높이를 지정할 수 있습니다.
예제
아래 코드를 실행한 후 버튼을 클릭해 보세요. 클릭하는 순간 해당 버튼의 높이가 100px로 변경되는 것을 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<body>
<h1>Heading 1</h1>
<p>This is Demo Text.</p>
<button type="button" id="myID" onclick="display()">Update Height</button>
<script>
function display() {
document.getElementById("myID").style.height = "100px";
}
</script>
</body>
</html>
코드 설명
- 버튼을 클릭하면
onclick이벤트에 의해display()함수가 호출됩니다. document.getElementById("myID")를 통해 id가 "myID"인 요소, 즉 버튼 자기 자신을 선택합니다..style.height = "100px"구문으로 해당 요소의 높이를 100픽셀로 동적으로 변경합니다.
이처럼 style.height 속성을 활용하면 사용자의 상호작용에 따라 요소의 크기를 실시간으로 조절할 수 있어, 아코디언 메뉴나 토글 패널 같은 동적인 UI를 구현할 때 유용하게 사용됩니다.