JavaScript에서는 marginTop 속성을 사용하여 요소의 상단 여백을 설정할 수 있습니다. 이 속성은 CSS의 margin-top과 동일한 역할을 하며, DOM 요소의 style 객체를 통해 동적으로 값을 지정할 수 있습니다.
아래 예제 코드를 직접 실행해 보세요. 버튼을 클릭하면 해당 요소의 상단 여백이 150px로 변경되는 것을 확인할 수 있습니다.
예제
<!DOCTYPE html>
<html>
<head>
<style>
#myID {
border: 2px solid #000000;
}
</style>
</head>
<body>
<div id="myID">This is demo text.</div><br>
<button type="button" onclick="display()">Add top margin</button>
<script>
function display() {
document.getElementById("myID").style.marginTop = "150px";
}
</script>
</body>
</html>코드 설명
- #myID 스타일: 대상 요소에 검은색 실선 테두리를 적용하여 여백 변화를 눈으로 쉽게 확인할 수 있도록 했습니다.
- 버튼 클릭 이벤트: 버튼을 클릭하면
onclick속성을 통해display()함수가 호출됩니다. - marginTop 적용:
document.getElementById("myID")로 요소를 선택한 뒤,style.marginTop = "150px"을 설정하여 상단 여백을 150px로 지정합니다.
이처럼 marginTop 속성을 활용하면 사용자의 동작에 반응해 요소의 상단 여백을 실시간으로 조절할 수 있습니다. 값은 px뿐만 아니라 em, % 등 다양한 CSS 단위로 지정할 수 있습니다.