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

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

Meter maxプロパティとは

meterオブジェクトのmaxプロパティは、HTMLの<meter>要素におけるmax属性に対応する数値を、取得または設定するためのプロパティです。

<meter>要素は測定値や使用量などを視覚的に表示するための要素で、max属性はその測定範囲の最大値を表します。このmaxプロパティは、min（最小値）、low（低域しきい値）、high（高域しきい値）などの属性と組み合わせて使うことで、より精度の高いゲージ表示を実現できます。

構文

maxプロパティの値を取得する場合

meterElementObject.max

maxプロパティに値を設定する場合

meterElementObject.max = number

設定する値には数値を指定します。これにより、JavaScriptから動的に最大値を変更することが可能です。

サンプルコード

ここでは、Meter maxプロパティを使った具体的な例を見てみましょう。以下の例では、「Paula's Health Risk（ポーラの健康リスク）」という名前の<meter>要素を作成し、ボタンをクリックするとmax値が動的に変化する仕組みを実装しています。

<!DOCTYPE html>
<html>
<head>
<title>Meter max</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-max</legend>
<label for="paulaLifeSource">Paula's Health Risk: </label>
<meter id="paulaLifeSource" max="100" min="0" high="80" low="60" value="70"></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.max;
        paulaLifeSource.max = 80;
        divDisplay.textContent = 'Life Decreased to '+paulaLifeSource.max+' from '+Immunity;
    }
</script>
</body>
</html>

コードの解説

  • <meter>要素には初期状態として max="100"、min="0"、high="80"、low="60"、value="70" が設定されています。
  • ページ読み込み時には、div要素に「Life Source at 70/100」という現在の値と最大値が表示されます。
  • 「Medi Kit」ボタンをクリックすると、lifeSource() 関数が呼び出され、maxプロパティの現在の値（100）を変数に保存した後、max値が80に変更されます。
  • その結果、表示テキストが「Life Decreased to 80 from 100」に更新され、ゲージの最大値も動的に変化します。

実行結果

上記のコードを実行すると、以下のような出力が得られます。

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

ゲージには現在の値「70/100」が表示されています。

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

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

max値が80に変更され、表示も更新されていることが確認できます。

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

まとめ

Meter maxプロパティを使用することで、JavaScriptから<meter>要素の最大値を読み取ったり、動的に変更したりすることができます。ゲームの体力ゲージやシステムのリソース監視など、状況に応じてスケールが変わるUIを実装したい場合に非常に便利な機能です。min、low、highといった関連属性とあわせて活用しましょう。

  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