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

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

HTML DOM の Input Color type プロパティは、カラーピッカー（<input type="color">）要素の type 属性の値を取得または設定するために使用されるプロパティです。この記事では、基本的な構文から実際のコード例まで、初心者にもわかりやすく解説します。

基本構文

type プロパティの使い方は以下の通りです。

値を取得する場合

inputColorObject.type

値を設定する場合

inputColorObject.type = stringValue

指定できる文字列値（stringValue）

設定時に指定できる主な文字列値は以下の通りです。

stringValue説明
color入力タイプがカラーピッカーであることを示します
radio入力タイプがラジオボタンであることを示します
text入力タイプがテキストフィールドであることを示します

サンプルコード

ここでは、Input Color type プロパティを使って、カラーピッカーの type を動的に変更する例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<title>Input Color Type</title>
</head>
<body>
<form id="formForColorsInput">
Color Picker: <input type="color" id="Color" name="primaryColor" value="#0000ff">
</form>
<button onclick="changeNameValue()">Get type & change to text</button>
<div id="divDisplay"></div>
<script>
    var inputColor = document.getElementById("Color");
    var divDisplay = document.getElementById("divDisplay");
    divDisplay.textContent = 'Type of Input: '+inputColor.type;
    function changeNameValue() {
        if(inputColor.type == 'color'){
            var defaultColor = inputColor.defaultValue;
            inputColor.type = 'text';
            inputColor.value = defaultColor;
            divDisplay.textContent = 'Name of color input: '+inputColor.type;
        }
    }
</script>
</body>
</html>

実行結果

上記のコードを実行すると、次のような画面が表示されます。

ボタンをクリックする前

ページ読み込み時には、カラーピッカーの type が「color」として表示されます。

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

「Get type & change to text」ボタンをクリックした後

ボタンをクリックすると、JavaScript 内の処理によって input 要素の type が「color」から「text」に変更され、表示内容が更新されます。これにより、type プロパティで動的に入力タイプを切り替えられることが確認できます。

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

まとめ

Input Color type プロパティを使えば、JavaScript だけでフォーム要素の入力タイプを柔軟に取得・変更できます。ユーザーの操作に応じて UI を動的に変化させたい場合などに活用できる便利なプロパティです。

  1. HTML DOM Input Submit typeプロパティとは？構文とサンプルコードで解説

    HTML DOMのInput Submit typeプロパティは、type=submitが設定されたinput要素に関連付けられたプロパティです。このプロパティは、送信ボタン（submit）型のinput要素に対して常に文字列「submit」を返します。フォームの送信ボタンがどの種類の入力要素なのかをJavaScriptから動的に確認したい場合に役立ちます。構文（シンタックス）Submit typeプロパティの基本的な構文は以下の通りです。submitObject.type対象となるinput要素のオブジェクトに対して.typeを指定するだけで、その要素のtype属性値を文字列として取得できま

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

    HTML DOMのInput radio typeプロパティは、type=radioが設定されたinput要素（ラジオボタン）に関連付けられたプロパティです。このプロパティは、ラジオボタン型のinput要素に対して常に文字列「radio」を返します。要素の種類をプログラムから確認したい場合に便利です。構文radio typeプロパティの基本構文は以下のとおりです。radioObject.typeサンプルコードここで、radio typeプロパティの具体的な使用例を見てみましょう。<!DOCTYPE html> <html> <body> <h1>