株式会社オートプロジェクト

Columnコラム
  • TOP
  • コラム一覧
  • CSS|[jQuery]data属性の使用方法③(data属性を取得し、色を切り替える方法)
2023年6月20日
CSS|[jQuery]data属性の使用方法③(data属性を取得し、色を切り替える方法)

これまで2回にわたり、CSSでのdata属性の使用方法を紹介しました。気になる方は以下の記事もご覧ください。

今回はdata属性をを取得し、色を切り替える方法を紹介します。まずは、下記の[Result]の中にある赤、青、緑のボタンをそれぞれ押してください。

See the Pen
Untitled
by 林 (@hayashi-akina)
on CodePen.

HTML

 
             <p>ボタンを押すと色が変更します★</p>
                <div id="change-color">
                <button data-color="#db1222">赤</button>
                <button data-color="#262991">青</button>
                <button data-color="#135e2c">緑</button>
              </div>
			  
			  

CSS

#change-color{
    display:block;
    width: 100px;
    height: 100px;
    border: 1px dotted pink;
    margin-top: 20px;
  }
  main{
    margin-top: 20px;
  }

JavaScript

$(function () {
  "use strict";
  $('button').click(function () {
    //data-color(色)を取得
    let color=$(this).attr('data-color')
   
    //取得した色を背景色に設定
    let change=`${color}`
    $('#change-color').css('background-color',change)
  });
});
  1. $(‘button’).click(function () {
    let color=$(this).attr(‘data-color’) でbuttonタグをクリックした際、そのクリックされた箇所にあるdata-color属性の値を取得します。
  2. let change=`${color}`
    $(‘#change-color’).css(‘background-color’,change)で、取得した色を背景色に設定します。

これで、ボタンを押すとdata属性の値を取得して、色が切り替わるようになります。

data属性は、jQuery(JavaScript)で使用したい場合に使いやすく効果を発揮してくれるます。ぜひ、ほかにも活用してみてください。

Webデザイナー / コーダーのみなさまへ

株式会社オートプロジェクトでは、バックエンド全般を安心してお任せいただけます。

サーバー設定やDB管理、セキュリティ対策など幅広いニーズに対応いたします。お気軽にご相談ください。

>> バックエンドについて、オートプロジェクトに問い合わせをする