HTML DOM 进度对象

DOM 进度对象表示 HTML 文档的 <progress> 元素。

让我们创建一个进度对象 -

语法

以下是语法 -

document.createElement(“PROGRESS”);

属性

以下是进度对象的属性 -

属性
说明
max
它返回并更改 HTML 文档中进度元素的 max 属性的值。
position
它返回 HTML 文档中进度元素的 position 属性的值。
labels
它返回 HTML 文档中进度条标签的列表。
value
它返回并更改 HTML 文档中进度元素的 value 属性的内容。

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

示例

让我们看一个进度对象的示例 -

 在线演示

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

输出

这将产生以下输出 -

单击“创建进度对象”按钮以创建进度对象。

更新于： 2020-07-01

133 次查看

启动你的职业生涯

通过完成课程获得认证

开始
广告