Đối tượng Progress trong HTML DOM đại diện cho phần tử <progress> của một tài liệu HTML.
Hãy tạo đối tượng progress:
Cú pháp
Cú pháp như sau:
document.createElement(“PROGRESS”);
Các thuộc tính
Dưới đây là các thuộc tính của đối tượng progress:
| Thuộc tính | Giải thích |
|---|---|
| max | Trả về và cho phép thay đổi giá trị thuộc tính max của phần tử progress trong tài liệu HTML. |
| position | Trả về giá trị thuộc tính position của phần tử progress trong tài liệu HTML. |
| labels | Trả về danh sách các nhãn của thanh tiến trình trong tài liệu HTML. |
| value | Trả về và cho phép thay đổi nội dung thuộc tính value của phần tử progress trong tài liệu HTML. |
Ví dụ
Dưới đây là ví dụ về đối tượng progress:
<!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>Demo đối tượng DOM Progress</h1> <button onclick="createProgress()" class="btn">Tạo một đối tượng progress</button> <script> function createProgress() { var progressElement = document.createElement("PROGRESS"); progressElement.setAttribute("value","60"); progressElement.setAttribute("max","100"); document.body.appendChild(progressElement); } </script> </body> </html>
Kết quả
Đoạn mã trên sẽ cho kết quả như sau:
Nhấn vào nút 「Tạo một đối tượng progress」 để tạo một đối tượng progress.
