「jQuery」カラーcolorボタンで色の値を取得するサンプル

2022年8月3日

環境

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」が表示されます。

jQuery

Posted by arkgame

Related posts: