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

HTML DOM Input Range typeプロパティの使い方を徹底解説

HTML DOM Input Range typeプロパティとは

HTML DOMのInput Range typeプロパティは、type="range"が指定されたinput要素に関連付けられたプロパティです。range型の入力フィールドに対してこのプロパティを参照すると、常に文字列「range」を返します。

range型はスライダー形式の入力コントロールを表す要素であり、音量調整や評価値の選択などでよく使われます。JavaScript側で要素の種類を動的に確認したい場合に、このtypeプロパティが役立ちます。

構文

range typeプロパティの構文は以下の通りです。

rangeObject.type

サンプルコード

実際にrange typeプロパティを使用した例を見てみましょう。

<!DOCTYPE html>
<html>
<body>
<h1>Input range type プロパティ</h1>
<form>
音量 <input type="range" id="RANGE1" name="VOL">
</form>
<p>下のボタンをクリックすると、上のinput要素のtypeを取得できます</p>
<button type="button" onclick="rangeType()">GET Type</button>
<p id="Sample"></p>
<script>
    function rangeType() {
        var P = document.getElementById("RANGE1").type;
        document.getElementById("Sample").innerHTML = "inputフィールドのtype: " + P;
    }
</script>
</body>
</html>

実行結果

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

HTML DOM Input Range typeプロパティの使い方を徹底解説

続いて、「GET Type」ボタンをクリックした場合の出力は以下の通りです。

HTML DOM Input Range typeプロパティの使い方を徹底解説

コードの解説

上記の例では、以下のような流れで処理が行われています。

1. range型のinput要素を作成

まず、form要素の中に type="range"、id="RANGE1"、name="VOL" を指定したinput要素を作成しています。

<form>
音量 <input type="range" id="RANGE1" name="VOL">
</form>

2. ボタンの設置

次に、ユーザーがクリックすると rangeType() 関数を実行する「GET Type」ボタンを配置しています。

<button type="button" onclick="rangeType()">GET Type</button>

3. JavaScriptによるtype値の取得と表示

rangeType() 関数では、getElementById() メソッドを使ってinput要素を取得し、そのtype属性の値を変数Pに代入しています。その後、innerHTML プロパティを通じて、id「Sample」が付いた段落に結果を表示しています。

function rangeType() {
    var P = document.getElementById("RANGE1").type;
    document.getElementById("Sample").innerHTML = "inputフィールドのtype: " + P;
}

まとめ

Input Range typeプロパティは読み取り専用であり、range型のinput要素に対しては必ず「range」を返します。フォーム内の複数のinput要素を動的に判別したり、デバッグ時に要素の型を確認したりする際にシンプルかつ便利なプロパティなので、ぜひ活用してみてください。

  1. HTML DOM 入力レンジ（range）の autofocus プロパティの使い方を徹底解説

    HTML DOM の input range autofocus プロパティは、HTML の <input> 要素が持つ autofocus 属性に関連付けられたプロパティです。このプロパティを使うことで、ページが読み込まれた際にレンジスライダー（type=range の入力欄）へ自動的にフォーカスを当てるかどうかを、設定（set）および取得（get）することができます。 構文（Syntax） autofocus プロパティの基本的な構文は以下のとおりです。 autofocus プロパティを設定する場合： rangeObject.autofocus = true|false tru

  2. HTML DOM Input Range typeプロパティの使い方を徹底解説

    HTML DOM Input Range typeプロパティとはHTML DOMのInput Range typeプロパティは、type=rangeが指定されたinput要素に関連付けられたプロパティです。range型の入力フィールドに対してこのプロパティを参照すると、常に文字列「range」を返します。range型はスライダー形式の入力コントロールを表す要素であり、音量調整や評価値の選択などでよく使われます。JavaScript側で要素の種類を動的に確認したい場合に、このtypeプロパティが役立ちます。構文range typeプロパティの構文は以下の通りです。rangeObject.type