JavaScript에서 요소의 왼쪽 여백을 설정하려면 marginLeft 속성을 사용하면 됩니다. 이 속성은 CSS의 margin-left 스타일에 대응하며, style 객체를 통해 간단하게 조작할 수 있습니다.
아래 예제는 버튼을 클릭했을 때 display() 함수가 실행되어, 특정 문단 요소의 왼쪽 여백을 80px로 설정하는 코드입니다.
예제 코드
<!DOCTYPE html>
<html>
<body>
<button type="button" onclick="display()">왼쪽 여백 추가</button>
<p id="myID">데모 텍스트입니다.</p>
<script>
function display() {
document.getElementById("myID").style.marginLeft = "80px";
}
</script>
</body>
</html>코드 설명
document.getElementById("myID")를 통해 id가 "myID"인 요소를 가져온 뒤, .style.marginLeft 속성에 원하는 값을 할당합니다. 값은 픽셀(px), 퍼센트(%), em 등 유효한 CSS 단위를 문자열 형태로 지정해야 합니다.
버튼을 클릭하면 해당 문단이 화면 왼쪽에서 80px만큼 밀려나는 것을 확인할 수 있습니다. 이 방식은 사용자 인터랙션에 따라 동적으로 레이아웃을 변경할 때 유용하게 활용됩니다.