【簡単】カラーピッカーでユーザーに自由に色を変えてもらう方法

こんにちは、やせる子です。

体重の減量値シミュレータを使ってくれるがたくさんいて、好きな色に変えられたらもっといいかなと思い、ユーザーが自由に色を変更できる様にしました。その時、いろんなサイトからちょこちょこ使える部分を調べてかき集めて作ったのでまとめたものを備忘録として残します。

できるもの
HTML
JavaScript
動きの説明

できるもの

See the Pen Untitled by ｙｓ (@yaseruko) on CodePen.

カラーピッカーで色を変更すると、その変更した色が反映されるようになります。

HTML

<div> 
  <span>背景：</span>
  <input type="color" value="#00000" onchange="ch_back()" id="ch_back">
  <span>文字：</span>
  <input type="color" value="#00000" onchange="ch_font()" id="ch_font">
</div>

  <div id="letter">ここの文字の色が変わる</div>

JavaScript

function ch_back() {
    let ch_back = document.getElementById("ch_back").value;
    document.body.style.backgroundColor = ch_back;
}
function ch_font() {
    let ch_font = document.getElementById("ch_font").value;
  let lette = document.getElementById("letter");

   letter.style.color = ch_font;
}

動きの説明

HTMLでカラーピッカーを表示します。

  <input type="color" value="#00000" onchange="ch_back()" id="ch_back">

「input type=”color”」でカラーピッカーが表示され、「value=”#00000″」で初期値の色を指定しています。#00000なので初期値が黒のカラーピッカーが表示されます。

カラーピッカーが変更された際の処理をonchangeで指定します。

今回は「onchange=”ch_back()”」と記載しているためch_back()が処理されます。

function ch_back() {
    let ch_back = document.getElementById("ch_back").value;
    document.body.style.backgroundColor = ch_back;
}

ch_back()では変更された際の色の値を取得し、その値を背景色に指定することでカラーピッカーで変更した色が背景に反映されるようになります。

「style.backgroundColor」の.以下を変更すれば、背景以外も色が変更できるようになります。

🔽おすすめ本🔽

リンク