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

HTML DOM의 객체 너비(Object Width) 속성은 웹 페이지에 삽입된 <object> 요소의 너비를 설정하거나, 현재 적용된 너비 값을 가져오는(반환) 데 사용됩니다. 너비 값은 항상 픽셀(pixel) 단위로 지정됩니다.

구문(Syntax)

1. 객체의 너비 값 가져오기

objObject.width

2. 객체의 너비 값 설정하기

objObject.width = pixels

위 구문에서 pixels는 객체 너비에 지정할 픽셀 값을 의미합니다. 예를 들어 objObject.width = 500;처럼 작성하면 해당 객체의 너비가 500픽셀로 변경됩니다.

예제 코드

이제 DOM 객체 너비 속성을 실제로 구현한 예제를 살펴보겠습니다. 아래 코드에서는 버튼을 클릭하면 객체의 너비가 300px에서 550px로 변경됩니다.

<!DOCTYPE html>
<html>
<body>
   <object id="newObj" width="300" height="200"      data="https://www.tutorialspoint.com/flex/samples/CSSApplication.swf" style="border:2px solid red">     </object>
   <p>버튼을 클릭하여 너비를 변경해 보세요.</p>
   <button onclick="display()">너비 업데이트</button>
   <p id="myid"></p>
   <script>
      function display() {
         document.getElementById("newObj").width = "550";
      }
   </script>
</body>
</html>

실행 결과

코드를 실행하면 빨간색 테두리를 가진 객체가 화면에 표시되며, 초기 너비는 300픽셀입니다.

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

이제 “너비 업데이트” 버튼을 클릭하면 자바스크립트 함수가 실행되어 객체의 너비가 550픽셀로 즉시 변경되는 것을 확인할 수 있습니다.

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

정리

HTML DOM 객체 너비 속성은 동적으로 미디어 콘텐츠나 외부 리소스의 크기를 조절할 때 유용하게 활용됩니다. 사용자 인터랙션(버튼 클릭 등)에 반응하여 레이아웃을 유연하게 변경해야 하는 경우 이 속성을 활용하면 간단하게 구현할 수 있습니다.