ออบเจ็กต์ HTML DOM Progress

ออบเจ็กต์ HTML DOM Progress แทนองค์ประกอบ <progress> ในเอกสาร HTML

ลองสร้าง progress object:

รูปแบบไวยากรณ์ (Syntax)

document.createElement(“PROGRESS”);

คุณสมบัติ (Properties)

คุณสมบัติของ progress object มีดังนี้:

คุณสมบัติ	คำอธิบาย
max	คืนค่าและเปลี่ยนค่าของแอตทริบิวต์ max ขององค์ประกอบ progress ในเอกสาร HTML
position	คืนค่าของแอตทริบิวต์ position ขององค์ประกอบ progress ในเอกสาร HTML
labels	คืนค่ารายการ label ของแถบความคืบหน้าในเอกสาร HTML
value	คืนค่าและเปลี่ยนเนื้อหาของแอตทริบิวต์ value ขององค์ประกอบ progress ในเอกสาร HTML

ตัวอย่าง

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

<!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</h1> <button onclick="createProgress()" class="btn">สร้าง 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>

ผลลัพธ์

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

ออบเจ็กต์ HTML DOM Progress

คลิกปุ่ม 「สร้าง progress object」 เพื่อสร้าง progress object

ออบเจ็กต์ HTML DOM Progress