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

HTML DOM Input ColorのdefaultValueプロパティとは？使い方をサンプルコードで解説

HTML DOMのInput Color defaultValueプロパティは、<input type="color">で作成されたカラーピッカーのデフォルト値を取得・設定するために使用されるプロパティです。このデフォルト値は、value属性の値と一致する場合もあれば、JavaScriptによって後から変更されている場合には異なることもあります。

defaultValueプロパティの構文

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

デフォルト値を取得する場合

inputColorObject.defaultValue

デフォルト値を設定する場合

inputColorObject.defaultValue = 'string'

指定できる値

設定する「string」には、16進数形式のカラーコードを指定します。指定可能な値とその説明は以下の表のとおりです。

値説明
#000000〜#ffffffカラーピッカーのデフォルト値として、この範囲内の16進数カラーコードを設定できます

サンプルコード

それでは、Input Color defaultValueプロパティの具体的な使用例を見てみましょう。以下の例では、ボタンをクリックするとカラーピッカーに設定されたデフォルト値が画面に表示されます。

<!DOCTYPE html>
<html>
<head>
<title>Input Color Default Value</title>
</head>
<body>
<form>
Color Picker: <input type="color" id="Color" value="#00cc00">
</form>
<button onclick="getDefaultValue()">Get Default Value</button>
<div id="divDisplay"></div>
<script>
   var divDisplay = document.getElementById("divDisplay");
   var inputColor = document.getElementById("Color");
   function getDefaultValue() {
      divDisplay.textContent = 'Default Color: '+inputColor.defaultValue;
   }
</script>
</body>
</html>

実行結果

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

「Get Default Value」ボタンをクリックする前 −

HTML DOM Input ColorのdefaultValueプロパティとは？使い方をサンプルコードで解説

「Get Default Value」ボタンをクリックした後 −

HTML DOM Input ColorのdefaultValueプロパティとは？使い方をサンプルコードで解説

この例では、カラーピッカーの初期値として「#00cc00」が設定されています。ボタンをクリックすると、defaultValueプロパティによってこのデフォルト値が取得され、画面に表示されます。なお、ユーザーがカラーピッカーで別の色を選択しても、defaultValueプロパティが返す値は変わりません。これは、defaultValueがあくまで「初期設定値」を参照するのに対し、valueプロパティは「現在の値」を参照するためです。用途に応じて両者を正しく使い分けることが重要です。

  1. HTML DOM 入力週（Input Week）のdefaultValueプロパティの使い方を解説

    Input Week（週入力）の defaultValue プロパティは、週入力フィールドに対応するデフォルト値を設定・取得するためのプロパティです。value 属性はユーザーが週入力をリセットすると変化しますが、defaultValue の値は変化しません。この性質により、フォームを初期状態に戻す処理などで活用できます。 構文 以下が構文です。 文字列値を取得する場合 inputWeekObject.defaultValue defaultValue に文字列を設定する場合 inputWeekObject.defaultValue = string サンプルコード それでは、Inpu

  2. HTML DOM Input Text defaultValue プロパティの使い方を解説

    Input Text defaultValue プロパティとはHTML DOM の Input Text defaultValue プロパティは、テキストフィールドのデフォルト値(defaultValue)を設定または取得するために使用されるプロパティです。要素の defaultValue とは、HTML の value 属性に指定された値を指します。value プロパティとの違いは、defaultValue プロパティが最初に指定された元のデフォルト値を保持し続けるのに対し、value プロパティの値はユーザーが入力フィールドに入力した内容に応じて変化するという点です。つまり、ユーザーがテキ