JavaScript에서 요소의 하단 여백을 설정하려면 marginBottom 속성을 사용하면 됩니다. 이 속성은 CSS의 margin-bottom과 동일한 역할을 하며, DOM 요소의 인라인 스타일을 동적으로 변경할 때 유용합니다.
marginBottom 속성 문법
object.style.marginBottom = "값";
값에는 px, em, % 등 다양한 단위를 사용할 수 있으며, 음수 값도 허용됩니다.
예제
아래 코드는 버튼을 클릭했을 때 JavaScript로 특정 요소의 하단 여백을 설정하는 예제입니다.
<!DOCTYPE html>
<html>
<body>
<p id="myID">This is demo text.</p>
<button type="button" onclick="display()">Set bottom margin</button>
<script>
function display() {
document.getElementById("myID").style.marginBottom = "95px";
}
</script>
</body>
</html>코드 설명
- getElementById("myID"): id가
myID인 요소를 선택합니다. - style.marginBottom = "95px": 해당 요소의 하단 여백을 95픽셀로 설정합니다.
- onclick="display()": 버튼 클릭 시
display()함수가 실행되어 스타일이 적용됩니다.
이처럼 marginBottom 속성을 활용하면 사용자의 동작에 따라 요소 간 간격을 실시간으로 조절할 수 있습니다. 상단, 좌측, 우측 여백이 필요하다면 각각 marginTop, marginLeft, marginRight 속성을 사용하면 됩니다.