JavaScript - カラーピッカーの情報を取得する

カラーピッカーの情報の取得

/* HTML側 */
<input type="color" id="colorid" value="#ff0000" />

/* JavaScript 側 */
var color = document.getElementById("colorid");

// 現在の値
console.log(color.value); // #ff0000
カラーピッカーの情報の取得

カラーピッカーの変更の検知

/* HTML側 */
<input type="color" id="changeid" />

/* JavaScript 側 */
var color = document.getElementById("colorid");

// 状態が変化したときにイベントが発生
color.addEventListener('change', (event) => {
  // 選択された色
  console.log(event.target.value);
});
カラーピッカーの変更の検知

関連記事