Thuộc tính HTML DOM paddingLeft trả về và thêm phần đệm bên trái vào một phần tử HTML.
Cú pháp
Sau đây là cú pháp -
1. Trả lại phần đệm bên trái
object.style.paddingLeft
2. Thêm phần đệm bên trái
object.style.paddingLeft=”value”
Giá trị
Ở đây, "giá trị" có thể là như sau -
| Giá trị | Chi tiết |
|---|---|
| | Nó xác định vùng đệm giá trị theo đơn vị độ dài. |
| tên viết tắt | 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ó định nghĩa vùng đệm theo tỷ lệ phần trăm chiều rộng của phần tử mẹ. |
Ví dụ
Hãy để chúng tôi xem một ví dụ về thuộc tính 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> Đầu ra
Điều này sẽ tạo ra kết quả sau -
Nhấp vào “ Thêm đệm ”Để thêm phần đệm bên trong hộp màu đỏ.
Đoạn mã trên cũng sẽ hiển thị như sau trên Console -
