Computer >> 컴퓨터 >  >> 프로그램 작성 >> HTML

HTML DOM paddingLeft 속성

<시간/>

HTML DOM paddingLeft 속성은 HTML 요소에 왼쪽 패딩을 반환하고 추가합니다.

구문

다음은 구문입니다 -

1. 왼쪽 패딩 반환

object.style.paddingLeft

2. 왼쪽 패딩 추가

object.style.paddingLeft=”value”

여기서 "값"은 다음과 같을 수 있습니다. -


세부정보
길이
길이 단위로 값 패딩을 정의합니다.
초기
기본값으로 패딩을 정의합니다.
상속
이 패딩은 부모 요소에서 상속됩니다.
백분율(%)
부모 요소 너비의 백분율로 패딩을 정의합니다.

예시

paddingLeft 속성의 예를 살펴보겠습니다 -

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>HTML DOM paddingLeft property</title>
<style>
   .outer-box{
      background-color:#db133a;
      width:300px;
      height:300px;
      margin:1rem auto;
   }
   .inner-box{
      background-color:#C3C3E6;
      width:150px;
      height:150px;
   }
</style>
</head>
<body>
<h1>paddingLeft Property Example&t;/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.paddingLeft='20px';
      console.log(outerBox.style.paddingLeft);
   }
</script>
</body>
</html>

출력

이것은 다음과 같은 출력을 생성합니다 -

HTML DOM paddingLeft 속성

"패딩 추가를 클릭합니다. ” 버튼을 눌러 빨간색 상자 안에 패딩을 추가합니다.

HTML DOM paddingLeft 속성

위의 코드는 콘솔에도 다음을 표시합니다 -

HTML DOM paddingLeft 속성