JavaScript에서 요소의 오른쪽 패딩(right padding)을 설정하려면 paddingRight 속성을 사용하면 됩니다. 이 속성은 CSS의 padding-right와 동일한 역할을 하며, DOM 스타일 객체를 통해 동적으로 값을 지정할 수 있습니다.
아래 예제 코드는 버튼을 클릭했을 때 JavaScript로 특정 요소의 오른쪽 패딩을 변경하는 방법을 보여줍니다.
예제
<!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()">Right padding</button>
<script>
function display() {
document.getElementById("box").style.paddingRight = "100px";
}
</script>
</body>
</html>
코드 설명
위 코드의 작동 방식은 다음과 같습니다.
먼저 #box라는 ID를 가진 div 요소에 빨간색 테두리와 고정된 너비·높이를 지정합니다. 그다음 버튼을 클릭하면 display() 함수가 호출되고, 함수 내부의 document.getElementById("box")로 해당 요소에 접근한 뒤 style.paddingRight 속성에 100px 값을 할당하여 오른쪽 패딩이 즉시 적용됩니다.
이처럼 paddingRight 속성은 픽셀(px), 퍼센트(%), em 등 다양한 CSS 단위를 값으로 사용할 수 있으며, 사용자 인터랙션에 따라 레이아웃을 실시간으로 조정해야 하는 경우에 유용하게 활용됩니다.