HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML DOM Progress maxプロパティの使い方を徹底解説！

HTML DOMのprogress maxプロパティは、HTMLドキュメント内の<progress>要素が持つmax属性の値を「取得」および「変更」するために使用されるプロパティです。プログレスバーの最大値を動的に操作したい場合に非常に便利です。

基本構文

progress maxプロパティの使い方は以下の2通りあります。

1. max値を取得する場合

object.max

2. max値を変更する場合

object.max = "number"

実装例

それでは、progress maxプロパティを使った具体的なサンプルコードを見ていきましょう。この例では、ボタンをクリックするとプログレスバーのmax値が100から200に変更されます。

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

実行結果

上記のコードを実行すると、次のような画面が表示されます。

HTML DOM Progress maxプロパティの使い方を徹底解説！

初期状態では、プログレスバーのmax値は100に設定されています。ここで「Change Max = 200」ボタンをクリックしてみましょう。

HTML DOM Progress maxプロパティの使い方を徹底解説！

ボタンをクリックすると、JavaScriptのchangeMax()関数が実行され、変更前のmax値（100）と変更後のmax値（200）が画面に表示されるとともに、プログレスバーのmax属性が動的に更新されます。

まとめ

progress maxプロパティを使えば、JavaScriptから簡単にプログレスバーの最大値を読み取ったり書き換えたりできます。タスクの進捗状況やアップロード率などを表示する際に、状況に応じて最大値を柔軟に変更できるため、インタラクティブなWebアプリケーション開発でぜひ活用してみてください。

  1. HTML DOMのMeter maxプロパティとは？取得・設定方法をわかりやすく解説

    Meter maxプロパティとはmeterオブジェクトのmaxプロパティは、HTMLの<meter>要素におけるmax属性に対応する数値を、取得または設定するためのプロパティです。<meter>要素は測定値や使用量などを視覚的に表示するための要素で、max属性はその測定範囲の最大値を表します。このmaxプロパティは、min（最小値）、low（低域しきい値）、high（高域しきい値）などの属性と組み合わせて使うことで、より精度の高いゲージ表示を実現できます。構文maxプロパティの値を取得する場合meterElementObject.maxmaxプロパティに値を設定する場合

  2. HTML DOM Input Range の max プロパティとは？使い方をサンプル付きで解説

    HTML DOM の Input Range max プロパティは、レンジスライダー（type=range の入力コントロール）における max 属性の値を設定または取得するために使用されます。max 属性はスライダーが取り得る最大値を示すもので、通常は min プロパティと組み合わせて使用することで、スライダーが動ける値の範囲（最小値〜最大値）を定義します。構文max プロパティに値を設定する場合rangeObject.max = numberここで number は、スライダーコントロールの最大値を表します。max プロパティの値を取得する場合var value = rangeObject