คุณสมบัติ paddingTop ของ DOM ใช้เพื่อตั้งค่าการเติมด้านบนขององค์ประกอบใน HTML จำไว้ว่าให้แทรกช่องว่างภายในเส้นขอบขององค์ประกอบ นอกจากนี้ยังใช้เพื่อส่งคืนช่องว่างภายในด้านบน ค่าเริ่มต้นคือ 0
ไวยากรณ์
ต่อไปนี้เป็นไวยากรณ์ -
- ไวยากรณ์เพื่อส่งคืนช่องว่างด้านบน
object.style.paddingTop
- ไวยากรณ์เพื่อตั้งค่าการเติมด้านบน
object.style.paddingTop = "%|length|initial|inherit"
% เป็นช่องว่างภายในด้านบน ความยาว เป็นช่องว่างภายในด้านบนยาว (หน่วย) เริ่มต้น ใช้เพื่อตั้งค่าคุณสมบัติเป็นค่าเริ่มต้นและสืบทอดใช้เพื่อ รับค่า องค์ประกอบรูปแบบคุณสมบัติหลัก
ตัวอย่าง
ให้เรามาดูตัวอย่างการใช้งานคุณสมบัติ paddingTop -
<!DOCTYPE html>
<html>
<head>
<style>
#sample {
border: 2px dashed #ded575;
}
</style>
</head>
<body>
<div id="sample">Demo text!</div>
<br>
<button type="button" onclick="demo()">Update</button>
<script>
function demo() {
document.getElementById("sample").style.paddingTop = "80px";
}
</script>
</body>
</html> ผลลัพธ์
สิ่งนี้จะสร้างผลลัพธ์ต่อไปนี้ -
เมื่อคลิกปุ่มอัปเดตด้านบน จะเห็นสิ่งต่อไปนี้ เราได้ตั้งค่าการเติมด้านบนอย่างง่ายดายโดยใช้คุณสมบัติการเติมด้านบน -
