JavaScript로 요소의 상단(top) 위치를 설정하는 방법

JavaScript에서 요소의 상단 위치를 지정하려면 top 속성을 사용하면 됩니다. 다만 top 속성은 position 값이 absolute, relative, fixed 중 하나일 때만 적용되므로, CSS에서 해당 요소의 position을 먼저 설정해 두어야 합니다.

예제

아래 코드는 버튼을 클릭하면 div 요소의 상단 위치가 100px로 변경되는 간단한 예제입니다.

<!DOCTYPE html>
<html>
   <head>
      <style>
         #myID {
            position: absolute;
         }
      </style>
   </head>

   <body>
      <button onclick="display()">상단 위치 설정</button>
      <div id="myID">
         데모 텍스트입니다! 데모 텍스트입니다!
      </div>

      <script>
         function display() {
            document.getElementById("myID").style.top = "100px";
         }
      </script>
   </body>
</html>

코드 설명

CSS에서 #myID에 position: absolute;를 지정하여 top 속성이 적용될 수 있도록 합니다.
버튼을 클릭하면 display() 함수가 실행됩니다.
document.getElementById("myID")로 해당 div 요소를 가져온 뒤, style.top = "100px"을 통해 상단 위치를 100px로 설정합니다.

이처럼 JavaScript의 style.top 속성을 활용하면 버튼 클릭 등 특정 이벤트 발생 시 요소의 세로 위치를 동적으로 변경할 수 있습니다.