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

トップ
サービス
事例
コラム
会社概要
お問い合わせ
Columnコラム
  • TOP
  • コラム一覧
  • CSS｜［jQuery］data属性の使用方法③（data属性を取得し、色を切り替える方法）
カテゴリーから探す
アーカイブから探す
2023年6月20日
明奈
CSS｜［jQuery］data属性の使用方法③（data属性を取得し、色を切り替える方法）

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

deta属性の使用方法①［タイトルに仮名を付ける方法］
deta属性の使用方法②［ラベルを作成し、文言や色を指定する方法］

今回は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）で使用したい場合に使いやすく効果を発揮してくれるます。ぜひ、ほかにも活用してみてください。

一覧へ戻る