JavaScript에서 요소의 왼쪽 패딩(left padding)을 설정하려면 paddingLeft 속성을 사용합니다. 이 속성은 CSS의 padding-left 스타일 속성에 대응하며, px(픽셀), %, em 등 다양한 단위로 값을 지정할 수 있습니다.
예제
다음 예제에서는 버튼을 클릭하면 display() 함수가 호출되어, id가 "box"인 div 요소의 왼쪽 패딩이 100px로 변경됩니다.
<!DOCTYPE html>
<html>
<head>
<style>
#box {
border: 2px solid #FF0000;
width: 150px;
height: 70px;
}
</style>
</head>
<body>
<div id = "box">This is demo text.</div>
<br><br>
<button type = "button" onclick = "display()">Left padding</button>
<script>
function display() {
document.getElementById("box").style.paddingLeft = "100px";
}
</script>
</body>
</html>동작 방식 설명
위 코드의 핵심은 다음 한 줄입니다.
document.getElementById("box").style.paddingLeft = "100px";getElementById()로 해당 요소를 가져온 뒤, style.paddingLeft에 원하는 값을 할당하면 즉시 화면에 반영됩니다. 버튼을 클릭하기 전과 후를 비교해 보면 빨간색 테두리 안에서 텍스트가 오른쪽으로 밀려나는 것을 확인할 수 있습니다.