Thuộc tính tối đa tiến trình DOM HTML trả về và thay đổi giá trị của thuộc tính tối đa của phần tử tiến trình trong tài liệu HTML.
Cú pháp
Sau đây là cú pháp -
-
1. Trả về tối đa
object.max
-
2. Sửa đổi tối đa
object.max = “number”
Ví dụ
Hãy để chúng tôi xem một ví dụ về thuộc tính tiến độ tối đa -
<!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>DOM Progress max Property Demo</h1>
<p>Status of your pending work:</p>
<p>(blue = completed & white = pending)</p>
<progress value="20" max="100" class="progress"></progress>
<button onclick="changeMax()" class="btn">Change Max = 200</button>
<div class="show"></div>
<script>
function changeMax() {
var progress = document.querySelector(".progress");
var msg = document.querySelector(".show");
msg.innerHTML = "Previous max value is " + progress.max +'';
progress.max="200";
msg.innerHTML += " New max value is " + progress.max+"";
}
</script>
</body>
</html> Đầu ra
Điều này sẽ tạo ra kết quả sau -
Nhấp vào “ Thay đổi Max =200 ”Để thay đổi giá trị của thuộc tính max của thanh tiến trình.
