아무래도 7note입니다. 1행으로 만드는 컬러 피커(※IE 비대응)

HTML에서는 컬러 피커를 단 한 줄로 만들 수 있습니다!

index.html

<input type="color" value="#ffffff">

조금 이해하기 어려울지도 모릅니다만, 왼쪽 상단의 작은 버튼다운 사각형을 클릭하면, 컬러 피커를 표시할 수 있습니다.

응용편 : 컬러 피커의 값을 얻고 웹 사이트의 배경색을 변경합니다.

index.html

<input type="color" value="#ff0000" id="colorpicker">

script.js

// カラーピッカーを変数に格納
var picker = document.getElementById("colorpicker");

// 値が変更された時、背景色を変更する
picker.addEventListener('change', (event) => {
    var inputValue = picker.value;
    document.body.style.backgroundColor = inputValue ;
});

요약

좀처럼 사용할 기회는 적을지도 모릅니다만, 기억해 두면 어딘가에서 사용할 수 있을지도 모릅니다.
간단하게 작성하고 재미 있었기 때문에 이것을 사용하여 뭔가 재미있는 것을 만들고 싶네요.

어머니!

~ Qiita에서 매일 게시 중!! ~
【초보자용】WEB 제작의 조금 테크 모임