「jQuery」カラーcolorボタンで色の値を取得するサンプル
環境
Windows 10 home 64bit Google Chrome 103.0.5060.134 jquery 3.6.0
構文
1.色の変更イベント
<input type="color" id="カラーボタンID名" />
$(“#カラーボタンID名").change(function () {処理コード
changeメソッドを使って色の変更をキャッチします。
2.指定要素に色のセット
const 変数名 = $(“#カラーボタンID名").val();
$(“#表示要素ID名").text(変数名);
使用例
<!DOCTYPE html> <html> <body> <label>カラーボタンで色を指定 <input type="color" id="cftColor" /></label> <div>カラーボタンで色を取得した値: <span id="cv"></span></div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script> $("#cftColor").change(function () { const cr = $("#cftColor").val(); $("#cv").text(cr); }); </script> </body> </html>
結果
カラーcolorボタンで色(#301fb2」)を変更します。 span要素に「カラーボタンで色を取得した値: #301fb2」が表示されます。