スペクトルカラーボタン/カラーピッカーボタンの作り方

Question

カラースペクトラムを表示するボタンを作成する必要があります。カラースペクトラム内のスポットをクリックすると、スポットカラーが選択され、テキストカラーが変更されますピックされた色に。

これは

p.s スペクトル色領域は、同様にキーボードを使ってアクセスする必要があり、私は事前に

感謝を必要とするものの一種です。

Answer 1

これは必要なものの基本的な概要です。より滑らかな色を得るには、iが増加し、divsのwidthの値が低くなります（数学を行う必要があります）。お役に立てれば ：）。

function getColor(){ 
 
    style = window.getComputedStyle(this), 
 
    bgColor = style.getPropertyValue('background-color'); 
 
    document.querySelector('h1').style.color = bgColor; 
 
} 
 
var cont = document.getElementById('cont'); 
 
for(i=0; i<350; i=i+14){ 
 
    var div=document.createElement('div'); 
 
    cont.appendChild(div); 
 
    div.style.background = 'hsl(' + i + ',100%, 50%)'; 
 
    div.addEventListener('click', getColor); 
 
}

@import url('https://necolas.github.io/normalize.css/latest/normalize.css'); 
 
#cont{ border:1px solid black; width:200px; height:30px; } 
 
#cont div{ 
 
    width:4%; height:100%; float:left; 
 
}

<div id="cont"> 
 
</div> 
 
<h1>text</h1>