これまで2回にわたり、CSSでのdata属性の使用方法を紹介しました。気になる方は以下の記事もご覧ください。
今回はdata属性をを取得し、色を切り替える方法を紹介します。まずは、下記の［Result］の中にある赤、青、緑のボタンをそれぞれ押してください。
See the Pen
Untitled by 林 (@hayashi-akina)
on CodePen.
<p>ボタンを押すと色が変更します★</p>
<div id="change-color">
<button data-color="#db1222">赤</button>
<button data-color="#262991">青</button>
<button data-color="#135e2c">緑</button>
</div>
#change-color{
display:block;
width: 100px;
height: 100px;
border: 1px dotted pink;
margin-top: 20px;
}
main{
margin-top: 20px;
}$(function () {
"use strict";
$('button').click(function () {
//data-color（色）を取得
let color=$(this).attr('data-color')
//取得した色を背景色に設定
let change=`${color}`
$('#change-color').css('background-color',change)
});
});これで、ボタンを押すとdata属性の値を取得して、色が切り替わるようになります。
data属性は、jQuery（JavaScript）で使用したい場合に使いやすく効果を発揮してくれるます。ぜひ、ほかにも活用してみてください。
株式会社オートプロジェクトでは、バックエンド全般を安心してお任せいただけます。
サーバー設定やDB管理、セキュリティ対策など幅広いニーズに対応いたします。お気軽にご相談ください。
