DOM Progress Object แสดงถึงองค์ประกอบ
ให้เราสร้างวัตถุความคืบหน้า -
ไวยากรณ์
ต่อไปนี้เป็นไวยากรณ์ -
document.createElement(“PROGRESS”);
คุณสมบัติ
ต่อไปนี้เป็นคุณสมบัติของวัตถุความคืบหน้า -
ทรัพย์สิน | คำอธิบาย |
---|---|
แม็กซ์ | ส่งกลับและแก้ไขค่าของแอตทริบิวต์สูงสุดขององค์ประกอบความคืบหน้าในเอกสาร HTML |
ตำแหน่ง | ส่งคืนค่าแอตทริบิวต์ตำแหน่งขององค์ประกอบความคืบหน้าในเอกสาร HTML |
ป้ายกำกับ | ส่งคืนรายการป้ายกำกับของแถบความคืบหน้าในเอกสาร HTML |
ค่า | ส่งกลับและแก้ไขเนื้อหาของแอตทริบิวต์ค่าขององค์ประกอบความคืบหน้าในเอกสาร HTML |
ตัวอย่าง
มาดูตัวอย่างความคืบหน้ากัน −
<!DOCTYPE html> <html> <head> <style> body{ text-align:center; background-color:#fff; color:#0197F6; } h1{ color:#23CE6B; } .drop-down{ width:35%; border:2px solid #fff; font-weight:bold; padding:8px; } .btn{ background-color:#fff; border:1.5px dashed #0197F6; height:2rem; border-radius:2px; width:60%; margin:2rem auto; display:block; color:#0197F6; outline:none; cursor:pointer; } p{ font-size:1.2rem; background-color:#db133a; color:#fff; padding:8px; } </style> </head> <body> <h1>DOM progress Object Demo</h1> <button onclick="createProgress()" class="btn">Create a progress object</button> <script> function createProgress() { var progressElement = document.createElement("PROGRESS"); progressElement.setAttribute("value","60"); progressElement.setAttribute("max","100"); document.body.appendChild(progressElement); } </script> </body> </html>
ผลลัพธ์
สิ่งนี้จะสร้างผลลัพธ์ต่อไปนี้ -
คลิกที่ “สร้างวัตถุความคืบหน้า ” เพื่อสร้างวัตถุความคืบหน้า