คุณสมบัติ paddingRight ของ HTML DOM Style ใช้คืนค่าและเพิ่ม padding ด้านขวาให้กับองค์ประกอบ HTML
ไวยากรณ์
ไวยากรณ์มีดังนี้ −
1. คืนค่า paddingRight
object.style.paddingRight
2. เพิ่ม paddingRight
object.style.paddingRight="value"
ที่นี่ value สามารถเป็นค่าต่อไปนี้ −
| ค่า | รายละเอียด |
|---|---|
| length | กำหนดค่า padding ในหน่วยความยาว |
| initial | กำหนด padding ให้เป็นค่าเริ่มต้น |
| inherit | padding จะถูกสืบทอดจากองค์ประกอบพาเรนต์ |
| percentage(%) | กำหนด padding เป็นเปอร์เซ็นต์ของความกว้างขององค์ประกอบพาเรนต์ |
ลองดูตัวอย่างการใช้งานคุณสมบัติ paddingRight ของ HTML DOM Style −
ตัวอย่าง
<!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>การสาธิตคุณสมบัติ paddingRight ของ HTML DOM Style</h1> <div class="outer-box"> <div class="inner-box"> </div> </div> <button type="button" onClick='addPadding()'>เพิ่ม Padding</button> <script> function addPadding() { var outerBox = document.querySelector('.outer-box') outerBox.style.paddingRight = '20px'; } </script> </body> </html>
ผลลัพธ์
คลิกปุ่ม เพิ่ม Padding เพื่อเพิ่ม padding ภายในกล่องสีแดง −
