คุณสมบัติ style padding ของ HTML DOM

คุณสมบัติ style padding ของ HTML DOM จะคืนค่าและปรับเปลี่ยน padding ขององค์ประกอบในเอกสาร HTML

รูปแบบการใช้งาน (Syntax)

การคืนค่า padding:

object.style.padding

การปรับเปลี่ยน padding:

object.style.padding = “value

ตัวอย่างการใช้งาน

ตัวอย่างด้านล่างแสดงการใช้งานคุณสมบัติ HTML DOM style padding

<!DOCTYPE html> <html> <head> <style>    body {       color: #000;       background: lightblue;       height: 100vh;    }    p {       border: 2px solid #fff;    }    .btn {       background: #db133a;       border: none;       height: 2rem;       border-radius: 2px;       width: 40%;       display: block;       color: #fff;       outline: none;       cursor: pointer;    } </style> </head> <body> <h1>ตัวอย่างคุณสมบัติ DOM Style padding</h1> <p> สวัสดี! ผมคือย่อหน้าที่เก่งมากพร้อมข้อความสุ่มๆ. สวัสดี! ผมคือย่อหน้าที่เก่งมากพร้อมข้อความสุ่มๆ. สวัสดี! ผมคือย่อหน้าที่เก่งมากพร้อมข้อความสุ่มๆ. สวัสดี! ผมคือย่อหน้าที่เก่งมากพร้อมข้อความสุ่มๆ. </p> <button onclick="add()" class="btn">เพิ่ม padding</button> <script>    function add() {       document.querySelector('p').style.padding = "10px 30px";    } </script> </body> </html>

ผลลัพธ์

โค้ดด้านบนจะให้ผลลัพธ์ดังนี้

คลิกที่ปุ่ม "เพิ่ม padding" เพื่อเพิ่ม padding ให้กับองค์ประกอบย่อหน้า