Computer >> Máy Tính >  >> Lập trình >> HTML

Thuộc tính HTML DOM Style paddingRight

Thuộc tính HTML DOM Style paddingRight trả về và thêm phần đệm bên phải vào một phần tử HTML.

Cú pháp

Sau đây là cú pháp -

1. Trả lại paddingRight

object.style.paddingRight

2. Thêm paddingRight

object.style.paddingRight=”value”

Đây, “ giá trị ”Có thể là sau -

Giá trị Chi tiết
chiều dài Nó xác định vùng đệm giá trị theo đơn vị độ dài.
tên đầu tiên Nó xác định padding thành giá trị mặc định của nó.
kế thừa Trong phần đệm này được kế thừa từ phần tử mẹ của nó.
phần trăm (%) Nó xác định khoảng đệm theo phần trăm chiều rộng của phần tử mẹ.

Hãy để chúng tôi xem một ví dụ về thuộc tính HTML DOM Style paddingRight−

Ví dụ

<!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>

Đầu ra

Thuộc tính HTML DOM Style paddingRight

Nhấp vào nút “Thêm đệm” để thêm đệm bên trong hộp màu đỏ.

Thuộc tính HTML DOM Style paddingRight