Đối tượng Tiến trình DOM HTML

Đối tượng Tiến trình DOM đại diện cho phần tử của tài liệu HTML.

Hãy để chúng tôi tạo đối tượng tiến trình -

Cú pháp

Sau đây là cú pháp -

document.createElement(“PROGRESS”);

Thuộc tính

Sau đây là các thuộc tính của đối tượng tiến trình -

Thuộc tính Nhãn Giá trị

	Giải thích
max	Nó trả về và thay đổi giá trị của thuộc tính max của một phần tử tiến trình trong tài liệu HTML.
vị trí	Nó trả về giá trị của thuộc tính position của một phần tử tiến trình trong tài liệu HTML.
	Nó trả về danh sách các nhãn của thanh tiến trình trong tài liệu HTML.
	Nó trả về và thay đổi nội dung của thuộc tính giá trị của một phần tử tiến trình trong tài liệu HTML.

Ví dụ

Hãy để chúng tôi xem một ví dụ về đối tượng tiến trình -

<!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>

Đầu ra

Điều này sẽ tạo ra kết quả sau -

Đối tượng Tiến trình DOM HTML

Nhấp vào “ Tạo đối tượng tiến trình ”Để tạo một đối tượng tiến trình.

Đối tượng Tiến trình DOM HTML