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

JavaScript DOM으로 테이블 패딩(Padding) 변경하는 방법

테이블의 패딩(padding)을 변경하려면 DOM의 padding 속성을 사용하면 됩니다. 이 속성은 element.style.padding 형태로 접근하며, 원하는 크기(px, em 등)를 문자열로 지정하면 해당 요소의 안쪽 여백이 실시간으로 변경됩니다.

동작 원리

먼저 document.getElementById()를 이용해 패딩을 변경할 테이블 요소를 가져옵니다. 그다음 해당 요소의 style.padding 값에 새로운 크기를 할당하면, 별도의 CSS 수정 없이 JavaScript만으로 스타일을 동적으로 조절할 수 있습니다.

예제 코드

아래 예제는 버튼을 클릭하면 테이블의 패딩이 20px로 변경되는 코드입니다. 직접 실행해 결과를 확인해 보세요.

<!DOCTYPE html>
<html>
   <head>
      <script>
         function paddingFunc(x) {
            document.getElementById(x).style.padding = "20px";
         }
      </script>
   </head>
   <body>
      <table style = "border:2px dashed black" id = "newtable">
         <tr>
            <td>One</td>
            <td>Two</td>
         </tr>
         <tr>
            <td>Three</td>
            <td>Four</td>
         </tr>
         <tr>
            <td>Five</td>
            <td>Six</td>
         </tr>
      </table>

      <p>
         <input type = "button" onclick = "paddingFunc('newtable')" value = "Change Table Padding">
      </p>
   </body>
</html>

코드 설명

버튼을 클릭하면 onclick 이벤트에 의해 paddingFunc('newtable')

함수가 호출됩니다. 이 함수는 인자로 전달받은 ID(newtable)를 사용해 테이블 요소를 찾은 뒤, style.padding 값을 20px로 설정합니다. 그 결과 테이블 전체의 안쪽 여백이 즉시 넓어지는 것을 확인할 수 있습니다.

패딩 값을 개별 방향(top, right, bottom, left)으로 나누어 지정하고 싶다면 style.paddingTop, style.paddingRight 등의 속성을 활용하면 됩니다.