JavaScript에서 요소의 상단 패딩(위쪽 안쪽 여백)을 설정하려면 paddingTop 속성을 사용하면 됩니다. 이 속성은 CSS의 padding-top에 해당하며, DOM 요소의 style 객체를 통해 간단하게 값을 지정할 수 있습니다.
아래 예제는 버튼을 클릭했을 때 display() 함수가 호출되어, id가 box인 div 요소의 상단 패딩을 20px로 변경하는 코드입니다.
예제
<!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()">상단 패딩 적용</button>
<script>
function display() {
document.getElementById("box").style.paddingTop = "20px";
}
</script>
</body>
</html>코드 설명
#box: 빨간색 테두리를 가진 150×70px 크기의 div 요소입니다.<button onclick="display()">: 클릭 시display()함수가 실행됩니다.document.getElementById("box").style.paddingTop = "20px": id가box인 요소를 찾아 상단 패딩을 20px로 설정합니다.
버튼을 클릭하면 텍스트가 아래로 밀리면서 상단 패딩이 적용된 것을 확인할 수 있습니다. 필요에 따라 값에 px, %, em 등 다양한 단위를 사용할 수 있습니다.