「jQuery」カラーcolorボタンで色の値を取得するサンプル
環境
Windows 10 home 64bit
Google Chrome 103.0.5060.134
jquery 3.6.0
Windows 10 home 64bit
Google Chrome 103.0.5060.134
jquery 3.6.0
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>
<!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>
<!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」が表示されます。