JavaScript에서 요소의 오른쪽 여백(right margin)을 설정하려면 marginRight 속성을 사용하면 됩니다. 이 속성은 CSS의 margin-right와 동일한 역할을 하며, 스타일 값을 픽셀(px), 퍼센트(%) 등 다양한 단위로 지정할 수 있습니다.
아래 예제 코드를 실행해 보면, 버튼을 클릭했을 때 marginRight 속성을 통해 요소의 오른쪽 여백이 동적으로 변경되는 것을 확인할 수 있습니다.
예제
<!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 right margin</button>
<script>
function display() {
document.getElementById("myID").style.marginRight = "150px";
}
</script>
</body>
</html>코드 설명
위 코드의 동작 방식은 다음과 같습니다.
1. 스타일 정의: #myID 선택자를 사용하여 검은색 2px 실선 테두리를 적용해 요소의 경계를 쉽게 확인할 수 있도록 했습니다.
2. 버튼 클릭 이벤트: 버튼에 onclick="display()" 핸들러가 연결되어 있어, 클릭 시 display() 함수가 호출됩니다.
3. 오른쪽 여백 적용: document.getElementById("myID")로 해당 요소를 가져온 뒤, style.marginRight 속성에 "150px" 값을 할당하여 오른쪽 여백을 150픽셀로 설정합니다.
버튼을 클릭하면 div 요소의 오른쪽에 150px의 여백이 즉시 추가되는 것을 확인할 수 있습니다. 이처럼 marginRight 속성을 활용하면 사용자 인터랙션에 따라 요소의 여백을 실시간으로 조절할 수 있습니다.