Computer >> 컴퓨터 >  >> 프로그래밍 >> JavaScript

JavaScript에서 요소의 너비를 설정하는 방법 – style.width 속성 완벽 정리

JavaScript에서 HTML 요소의 너비를 설정하려면 style.width 속성을 사용하면 됩니다. 이 속성은 CSS의 width 속성에 대응하며, 픽셀(px)뿐만 아니라 퍼센트(%) 등 다양한 단위로 값을 지정할 수 있습니다.

기본 사용법

요소의 너비를 변경하는 기본 문법은 다음과 같습니다.

document.getElementById("요소ID").style.width = "값";

예제 코드

아래 예제는 버튼을 클릭하면 해당 버튼의 너비와 높이가 동시에 변경되도록 구현한 코드입니다. 실행해서 직접 결과를 확인해 보세요.

<!DOCTYPE html>
<html>
   <body>
      <button type="button" id="btn" onclick="display()">
         너비와 높이 변경하기
      </button>
      <script>
         function display() {
            document.getElementById("btn").style.width = "250px";
            document.getElementById("btn").style.height = "250px";
         }
      </script>
   </body>
</html>

코드 설명

  • onclick="display()" : 버튼을 클릭하면 display() 함수가 호출됩니다.
  • document.getElementById("btn") : id가 'btn'인 요소를 선택합니다.
  • style.width = "250px" : 선택한 요소의 너비를 250픽셀로 설정합니다.
  • style.height = "250px" : 함께 높이도 250픽셀로 지정하여 크기를 조절합니다.

참고 사항

width 값에는 반드시 단위를 함께 지정해야 합니다. 단위 없이 숫자만 입력하면 스타일이 적용되지 않습니다. 자주 사용되는 단위는 다음과 같습니다.

  • px : 고정된 픽셀 단위
  • % : 부모 요소 기준의 상대적 비율
  • em / rem : 글자 크기 기준의 상대 단위

또한 요소의 실제 렌더링된 크기를 읽어올 때는 offsetWidth, clientWidth 같은 속성을 활용할 수 있으며, 반응형 웹에서는 CSS 클래스를 전환하는 방식이 더 유연할 수 있습니다.