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
Nhấp vào nút “Thêm đệm” để thêm đệm bên trong hộp màu đỏ.