HTML DOM 객체 높이 속성 – 설정과 반환 방법 총정리

HTML DOM 객체 높이 속성이란?

HTML DOM의 Object Height 속성은 <object> 요소의 높이를 새로 설정하거나, 현재 적용된 높이 값을 가져오는 데 사용됩니다. 높이 값은 픽셀(pixel) 단위로 지정됩니다.

높이를 설정하는 구문

objObject.height = pixels

높이를 반환하는 구문

objObject.height

여기서 pixels는 객체의 높이에 지정할 값입니다. 값을 대입하면 해당 픽셀 크기만큼 객체의 높이가 변경되고, 값을 읽으면 현재 높이가 픽셀 단위로 반환됩니다.

예제로 확인하기

다음 예제는 DOM 객체 높이 속성을 실제로 구현한 코드입니다. 페이지에는 빨간색 테두리를 가진 객체가 표시되며, 버튼을 클릭하면 객체의 높이가 200px에서 350px로 동적으로 변경됩니다.

<!DOCTYPE html>
<html>
<body>
<object id="newObj" width="580" height="200" data="https://www.tutorialspoint.com/flex/samples/CSSApplication.swf" style="border:2px solid red"></object>
<p>Click to update the height.</p>
<button onclick="display()">Update Height</button>
<p id="myid"></p>
<script>
   function display() {
      document.getElementById("newObj").height = "350";
   }
</script>
</body>
</html>

실행 결과

페이지를 처음 열면 아래와 같이 높이 200px의 객체가 빨간색 테두리와 함께 나타납니다.

HTML DOM 객체 높이 속성 – 설정과 반환 방법 총정리

이제 “Update Height” 버튼을 클릭해 보세요.

HTML DOM 객체 높이 속성 – 설정과 반환 방법 총정리

버튼을 클릭하면 JavaScript의 display() 함수가 실행되어 객체의 height 속성이 350으로 업데이트되며, 화면에서 객체의 높이가 즉시 늘어난 것을 확인할 수 있습니다.

핵심 정리

objObject.height = pixels : 객체의 높이를 지정한 픽셀 값으로 설정합니다.
objObject.height : 객체의 현재 높이 값을 픽셀 단위로 반환합니다.
JavaScript 이벤트(버튼 클릭 등)와 함께 사용하면 사용자 인터랙션에 따라 객체 크기를 동적으로 조절할 수 있습니다.