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

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

Meter の min プロパティは、HTML の <meter> 要素における min 属性に対応する数値を、JavaScript から取得または設定できるプロパティです。このプロパティを max、high、low などの各属性と組み合わせて使うことで、より正確で視覚的に分かりやすいメーター表示を実現できます。

構文

min プロパティの基本的な構文は以下のとおりです。

現在の値を取得する場合

meterElementObject.min

新しい値を設定する場合

meterElementObject.min = number

取得時には min 属性に対応する数値が返され、設定時には指定した数値がメーターの下限値として反映されます。

サンプルコード

ここでは、Meter の min プロパティを使った具体例を見てみましょう。以下の例では、キャラクター「ポーラ」の健康状態を表すメーターを表示し、「Medi Kit（医療キット）」ボタンをクリックすると、min 値が 0 から 20 に変更される仕組みになっています。

<!DOCTYPE html>
<html>
<head>
<title>Meter min</title>
<style>
    form {
        width:70%;
        margin: 0 auto;
        text-align: center;
    }
    * {
        padding: 2px;
        margin:5px;
    }
    input[type="button"] {
        border-radius: 10px;
    }
</style>
</head>
<body>
<form>
<fieldset>
<legend>Meter-min</legend>
<label for="paulaLifeSource">Paula's Health Risk: </label>
<meter id="paulaLifeSource" max="100" min="0" high="80" low="60" value="60" optimum="40"></meter>
<input type="button" onclick="lifeSource()" value="Medi Kit">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
    var divDisplay = document.getElementById("divDisplay");
    divDisplay.textContent = 'Life Source at '+paulaLifeSource.value+'/'+paulaLifeSource.max;
    function lifeSource(){
        var paulaLifeSource = document.getElementById("paulaLifeSource");
        var Immunity = paulaLifeSource.min;
        paulaLifeSource.min = 20;
        divDisplay.textContent = 'Permenant Damage to '+paulaLifeSource.min+' from '+Immunity;
    }
</script>
</body>
</html>

実行結果

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

「Medi Kit」ボタンをクリックする前

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

初期状態では、min 属性が 0 に設定されているため、メーターの下限値は 0 です。画面には現在の値「60/100」という情報も表示されています。

「Medi Kit」ボタンをクリックした後

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

コードの解説

ボタンがクリックされると lifeSource() 関数が呼び出されます。この関数内では、まず paulaLifeSource.min によって現在の min 値（0）を変数に保存しています。続いて paulaLifeSource.min = 20; により、min 値を 20 に更新します。その結果、メーターの下限が 0 から 20 へと引き上げられ、表示テキストにも「Permenant Damage to 20 from 0」といった形で変更内容が反映されます。

このように、min プロパティを動的に操作することで、ページを再読み込みすることなくメーターの下限値をリアルタイムに変更できます。ゲージやプログレス表示など、ユーザーに状態を直感的に伝えたい場面で非常に便利な機能です。

  1. HTML DOM Meter valueプロパティとは？使い方とサンプルコードを解説

    HTML DOM Meter valueプロパティとはHTML DOMのMeter valueプロパティは、<meter>要素のvalue属性に対応する数値を取得（読み取り）または設定（書き込み）するためのプロパティです。このプロパティは、high・low・min・maxなどの属性と組み合わせて使用することで、より精度の高いゲージ表示を実現できます。注意：<meter>要素は進捗状況を示すプログレスバーとして使用するものではなく、あくまでゲージ（計測値の表示）としてのみ使用してください。進捗の表示には<progress>要素を使用するのが適切です。構文val

  2. HTML DOM Meter optimumプロパティの使い方を徹底解説

    HTML DOMのMeter optimumプロパティは、<meter>要素のoptimum属性に対応する数値を取得・設定するためのプロパティです。high、low、min、maxなどの各属性と組み合わせて使用することで、より正確で分かりやすい計測表示を実現できます。注意： <meter>要素はプログレスバー（進捗状況）としてではなく、ディスク使用量や投票結果など、固定範囲内における現在値を示すゲージ（計測器）としてのみ使用してください。進捗状況の表示には<progress>要素が適しています。構文optimumプロパティの値を取得する場合meterElem