JavaScript カラーボタンで色を取得/背景色セット

JavaScriptでカラーボタンの色の値を取得するサンプルです。

サンプル	カラーボタンとは
	色の値を取得する
	色の値を取得する(jQueryの場合)
	色の値を取得して背景(bodyタグ)の色をセットする

カラーボタンとは

以下は実際のカラーボタンです。

上記カラーボタンのhtmlのコードです。

<input type="color" id="col1" />

色の見本をみながら色を選択できます。

inputタグでtypeにcolorを指定します。

選択された値はJavaScriptで取得できます。

色の値を取得する

カラーボタンを押すと色選択のダイアログが表示されます。
色選択後、ダイアログを閉じると選択した色が表示されます。

取得した値

色を指定

<p>取得した値 <span id="span1"></span></p>
<label>色を指定 <input type="color" id="color1" /></label>
<script>
  const c1 = document.getElementById("color1");
  c1.addEventListener("change", changeColor);

  function changeColor() {
    document.getElementById("span1").textContent = c1.value;
  }
</script>

5行目は、イベントリスナを登録しています。
8行目のvalue値に色の値が入っています。

色の値を取得する(jQueryの場合)

<p>取得した値 <span id="span1"></span></p>
<label>色を指定<input type="color" id="color1" /></label>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
  $("#color1").change(function () {
    const c1 = $("#color1").val();
    $("#span1").text(c1);
  });
</script>

5行目のjQueryのchangeで色の変更をキャッチします。
6行目のvalで色の値であるvalue値を取得しています。

色の値を取得して背景(bodyタグ)の色をセットする

<p>取得した値 <span id="span1"></span></p>
<label>色を指定 <input type="color" id="color1" /></label>
<script>
  const c1 = document.getElementById("color1");
  c1.addEventListener("change", changeColor);

  function changeColor() {
    document.body.style.background = c1.value;
  }
</script>

画面の背景全体の色を変更する場合は、document.bodyを指定します。