Thuộc tính max của Progress trong HTML DOM

Thuộc tính max của HTML DOM Progress trả về và cho phép thay đổi giá trị thuộc tính max của một phần tử progress trong tài liệu HTML.

Cú pháp

Cú pháp như sau:

• 1. Lấy max:

object.max

• 2. Thiết lập max:

object.max = “số"

Ví dụ

Dưới đây là ví dụ về thuộc tính max của Progress:

<!DOCTYPE html> <html> <head> <style>    html{       height:100%;    }    body{       text-align:center;       color:#fff;       background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) center/cover no-repeat;       height:100%;    }    p{       font-weight:700;       font-size:1.2rem;    }    .drop-down{       width:35%;       border:2px solid #fff;       font-weight:bold;       padding:8px;    }    .btn{       background:#0197F6;       border:none;       height:2rem;       border-radius:2px;       width:35%;       margin:2rem auto;       display:block;       color:#fff;       outline:none;       cursor:pointer;    }    .show{       font-size:1.5rem;       font-weight:bold;    } </style> </head> <body> <h1>Demo thuộc tính max của DOM Progress</h1> <p>Trạng thái công việc dang dở:</p> <p>(xanh = đã hoàn thành & trắng = dang dở)</p> <progress value="20" max="100" class="progress"></progress> <button onclick="changeMax()" class="btn">Thay đổi Max = 200</button> <div class="show"></div> <script>    function changeMax() {       var progress = document.querySelector(".progress");       var msg = document.querySelector(".show");       msg.innerHTML = "Giá trị max trước là " + progress.max +'';       progress.max="200";       msg.innerHTML += "<p>Giá trị max mới là " + progress.max+"</p>";
   } </script> </body> </html>

Kết quả

Đoạn mã trên sẽ cho kết quả như sau:

Nhấn vào nút 「Thay đổi Max=200」 để thay đổi giá trị thuộc tính max của thanh tiến trình.