คุณสมบัติด้านบนของ HTML DOM Style ส่งคืนและแก้ไขตำแหน่งบนสุดขององค์ประกอบ HTML ที่วางตำแหน่งในเอกสาร HTML
ไวยากรณ์
ต่อไปนี้เป็นไวยากรณ์ -
1. กลับตัวท็อป
object.top
2. การดัดแปลงด้านบน
object.top = “value”
ในที่นี้ ค่าสามารถเป็น −
Sr.No | ค่า &คำอธิบาย |
---|---|
1 | เริ่มต้น โดยตั้งค่าคุณสมบัตินี้เป็นค่าเริ่มต้น |
2 | สืบทอด มันรับค่าคุณสมบัตินี้จากองค์ประกอบหลัก |
3 | เปอร์เซ็นต์ (%) มันกำหนดค่าเป็นเปอร์เซ็นต์ของความกว้างขององค์ประกอบหลัก |
4 | ความยาว มันกำหนดค่าสูงสุดในหน่วยความยาว |
5 | อัตโนมัติ ช่วยให้เบราว์เซอร์ตั้งค่าตำแหน่งบนสุดได้ |
ให้เราดูตัวอย่างของ HTML DOM Style top Property -
ตัวอย่าง
<!DOCTYPE html> <html> <style> body { color: #000; height: 100vh; } .btn { background: #db133a; border: none; height: 2rem; border-radius: 2px; width: 40%; display: block; color: #fff; outline: none; cursor: pointer; margin: 1rem 0; } .square { width: 100px; height: 100px; background: #db133a6b; position: relative; } .show { font-size: 1.2rem; margin: 1rem 0; } </style> <body> <h1>DOM Style top Property Demo</h1> <div class='square'></div> <button onclick="set()" class="btn">Set top position</button> <script> function set() { document.querySelector('.square').style.top = "200px"; } </script> </body> </html>
ผลลัพธ์
คลิกที่ “ตั้งตำแหน่งบนสุด ” เพื่อกำหนดตำแหน่งบนสุดของสี่เหลี่ยมสีชมพู