HTML DOM 스타일 paddingRight 속성은 HTML 요소에 오른쪽 패딩을 반환하고 추가합니다.
구문
다음은 구문입니다 -
1. paddingRight 반환
object.style.paddingRight
2. paddingRight 추가
object.style.paddingRight=”value”
여기에서 "가치 "는 다음과 같을 수 있습니다. -
| 값 | 세부정보 |
|---|---|
| 길이 | 길이 단위로 값 패딩을 정의합니다. |
| 초기 | 기본값으로 패딩을 정의합니다. |
| 상속 | 이 패딩은 부모 요소에서 상속됩니다. |
| 백분율(%) | 상위 요소 너비의 퍼센트로 패딩을 정의합니다. |
HTML DOM 스타일 paddingRight 속성의 예를 살펴보겠습니다-
예시
<!DOCTYPE html>
<html>
<head>
<style>
.outer-box {
background-color: #db133a;
width: 300px;
height: 300px;
margin: 1rem auto;
}
.inner-box {
background-color: #C3C3E6;
width: 100%;
height: 150px;
}
</style>
</head>
<body>
<h1>HTML DOM Style paddingRight Property Demo</h1>
<div class="outer-box">
<div class="inner-box">
</div>
</div>
<button type="button" onClick='addPadding()'>Add Padding</button>
<script>
function addPadding() {
var outerBox = document.querySelector('.outer-box')
outerBox.style.paddingRight = '20px';
}
</script>
</body>
</html> 출력
"패딩 추가" 버튼을 클릭하여 빨간색 상자 안에 패딩을 추가합니다.
