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

HTML DOM Meterオブジェクトとは？使い方と主要プロパティを徹底解説

HTML DOM Meterオブジェクトとは

HTML DOMにおけるMeterオブジェクトは、HTMLの<meter>要素をJavaScriptから操作・制御するためのインターフェースです。<meter>要素は、ディスク使用量やアンケート結果など、既知の範囲内における値をゲージ（計器）として視覚的に表示する際に使用されます。

注意：<meter>要素はプログレスバー（進捗状況の表示）として使用しないでください。あくまでゲージとしてのみ使用するのがルールです。進捗表示には<progress>要素を使うのが適切です。

構文

<meter>要素を新しく作成するには、次のように記述します。

var meterObject = document.createElement("METER");

Meterオブジェクトの主なプロパティ

生成したmeterObjectには、以下のプロパティが用意されています。

プロパティ説明
highゲージのhigh属性の値を設定・取得します。この値以上の範囲は「高い」と判断されます。
labelsゲージに関連付けられた<label>要素のリスト（NodeList）を返します。
lowゲージのlow属性の値を設定・取得します。この値以下の範囲は「低い」と判断されます。
maxゲージのmax属性の値を設定・取得します。測定範囲の最大値を指定します。
minゲージのmin属性の値を設定・取得します。測定範囲の最小値を指定します。
optimumゲージのoptimum属性の値を設定・取得します。最適とされる値の位置を示します。
valueゲージのvalue属性の値を設定・取得します。現在の測定値を表します。

サンプルコード：valueプロパティの使用例

ここでは、Meterオブジェクトのvalueプロパティを使った具体的な例を見てみましょう。ボタンをクリックすると、ゲージの現在値が変更され、その変化が画面に表示されます。

コード例

<!DOCTYPE html>
<html>
<head>
<title>Meter value</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-value</legend>
         <label for="paulaLifeSource">Paula's Health Risk: </label>
         <meter id="paulaLifeSource" max="100" min="0" high="80" value="75" low="70"></meter>
         <input type="button" onclick="lifeSource()" value="Reduce">
         <div id="divDisplay"></div>
      </fieldset>
   </form>
<script>
   var divDisplay = document.getElementById("divDisplay");
   divDisplay.textContent = 'Life Source at '+paulaLifeSource.value;
   function lifeSource(effect){
      var paulaLifeSource = document.getElementById("paulaLifeSource");
      var Immunity = paulaLifeSource.value;
      paulaLifeSource.value = 10;
      divDisplay.textContent = 'value changed to '+paulaLifeSource.value+' from '+Immunity;
   }
</script>
</body>
</html>

実行結果

「Reduce」ボタンをクリックする前：

HTML DOM Meterオブジェクトとは？使い方と主要プロパティを徹底解説

初期状態では、value属性に設定された値（85）がゲージに反映され、「Life Source at 85」というテキストが表示されます。

「Reduce」ボタンをクリックした後：

HTML DOM Meterオブジェクトとは？使い方と主要プロパティを徹底解説

ボタンをクリックすると、valueプロパティによって値が10に変更され、ゲージの表示も連動して更新されます。「value changed to 10 from 85」というように、変更前と変更後の値が画面に出力されることが確認できます。

まとめ

HTML DOMのMeterオブジェクトを使えば、<meter>要素の値や閾値（high / low / min / max / optimum）をJavaScriptから動的に操作できます。ただし、<meter>はあくまで測定値のゲージ表示用であり、進捗状況の表現には使わないよう注意しましょう。

  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 Ulオブジェクトとは？<ul>要素の操作方法とサンプルコードを解説

    HTML DOM の Ul オブジェクトは、HTML の <ul>（順序なしリスト）要素を表すオブジェクトです。JavaScript を使うことで、リストの動的な生成や操作が可能になります。 <ul> 要素の作成方法 新しい <ul> 要素を作成するには、document.createElement() メソッドを使用します。 var ulObject = document.createElement(UL) HTML5で非推奨となったプロパティ ulObject には以下のプロパティが存在しますが、これらは HTML5 ではサポートされていないため注