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

HTML DOM Input Color の value プロパティの使い方を解説

Input Color の value プロパティとは

HTML DOM の Input Color（<input type='color'>）要素の value プロパティは、カラーピッカーで選択されている色の値（value 属性）を「#rrggbb」形式の文字列として返します。値の取得だけでなく、新しい文字列を代入することで、JavaScript から色を動的に変更することもできます。

なお、value 属性が指定されていない場合の既定値は、黒を表す「#000000」です。

構文

値を取得する場合

inputColorObject.value

値を設定する場合

inputColorObject.value = 'String';

サンプルコード

以下は、Input Color の value プロパティを使って、現在の色の値を取得し、ボタンのクリックで別の色へ変更する例です。

<!DOCTYPE html>
<html>
<head>
<title>Input Color Value</title>
</head>
<body>
<form id="formForColorsInput">
Primary-Color: <input type="color" id="Color" name="primaryColor" value="#00ff00">
</form>
<button onclick="changeValue()">色の値を変更する</button>
<div id="divDisplay"></div>
<script>
    var inputColor = document.getElementById("Color");
    var divDisplay = document.getElementById("divDisplay");
    divDisplay.textContent = 'value: '+inputColor.value;
    function changeValue() {
        if(inputColor.value == '#00ff00'){
            inputColor.value = '#ff0000';
            divDisplay.textContent = 'value: '+inputColor.value;
        }
    }
</script>
</body>
</html>

実行結果

このコードを実行すると、次のような出力が得られます。

ボタンをクリックする前の表示：

HTML DOM Input Color の value プロパティの使い方を解説

「色の値を変更する」ボタンをクリックした後の表示：

HTML DOM Input Color の value プロパティの使い方を解説

初期状態では緑（#00ff00）が選択されていますが、ボタンをクリックすると value プロパティ経由で赤（#ff0000）に書き換わり、画面上の表示も更新されます。

  1. HTML DOM入力検索値（value）プロパティの使い方を解説

    HTML DOMのInput Search（type=search）におけるvalueプロパティは、検索フィールドのvalue属性に関連付けられたプロパティです。このプロパティを利用することで、検索フィールドに入力されている値を取得したり、JavaScriptから任意の値を設定したりすることができます。また、検索フィールドのデフォルト値を指定する目的でも使われ、ユーザーがテキストを入力すると、その値はユーザーの入力内容に置き換わります。構文valueプロパティの基本的な構文は以下の通りです。値を設定する場合searchObject.value = text;「text」の部分には、検索フィール

  2. HTML DOMのInput Submit valueプロパティとは？構文と使い方を実例で解説

    HTML DOM の input submit value プロパティは、type=submit を持つ input 要素の value 属性に関連付けられたプロパティです。このプロパティを使うことで、送信ボタンの value 属性の値を取得したり、新しい値を設定したりすることができます。 送信ボタンの value プロパティを変更すると、ボタンに表示されるテキストも変化します。通常、送信ボタンにはデフォルトで「Submit（送信）」というテキストが表示されますが、value プロパティを利用すれば、これを任意の文字列に自由に変更できます。 構文 value プロパティを設定する場合の基本的な