HTML5から追加されているdata属性は、「data-〇〇」など自身で属性の名前を決める事が出来るものとなります。
このdata属性を利用し、CSSの指定やJavaScript・jQueryで値の取得などが出来ます。
今回はこのdata属性の基本的な使い方を解説していきます。
data属性とは
data属性はHTML5から追加された属性で、「カスタムデータ属性」とも呼ばれています。
その名前の通り、自身で「data-〇〇」の「〇〇」部分の名前を決める事が可能です。
data属性を使用する事で、以下のような事が可能です。
- 指定のdata属性に対してのCSSの指定
- JavaScriptやjQueryでdata属性の値を取得・設定・変更
data属性へのCSSの指定はクラスを当てればいいかと思いますが、data属性が一番役に立つのがJavaScriptやjQueryでの使用となります。
今回は、その基本となるdata属性の使い方をメインに解説していきますので、ぜひ覚えて使ってみてください。
data属性の記述方法
data属性の記述方法は以下のようになります。
<div data-name="yamada">私の名前は山田です</div>上記のように「data-属性名=”値”」という形で記述します。
data属性には以下のようにいくつか決まり事がありますので注意してください。
- 属性名にはアルファベット、数字、ハイフン、アンダースコアのみが使用可能
- 属性名にはアルファベットの大文字(AからZ)は使用不可(小文字のみ)
- data属性の値はすべて文字列として扱われる
- 属性名は「xml」や「XML」から始めてはいけない
- セミコロン(;)は使用不可
data属性を使用したCSSの指定
data属性を使用する事で既存のクラスとの衝突を避けられたり、特定の条件のものだけにCSSを設定する事が可能になります。例として以下のように指定可能です。
<ul>
<li>リスト1</li>
<li data-list="red">リスト2</li>
<li>リスト3</li>
<li data-list="red">リスト4</li>
<li>リスト5</li>
</ul>[data-list="red"] {
color: red;
}- リスト1
- リスト2
- リスト3
- リスト4
- リスト5
上記例のように特定のdata属性の要素にCSSを指定出来ますが、しっかりとしたCSSのクラス付与に対するルールがあればdata属性を使用しなくても済みますので、CSSの指定に関しては限定した条件下になるかと思います。
JavaScriptやjQueryでdata属性の値を取得する方法
JavaScriptやjQueryを利用すると、data属性の値の取得や出力を簡単に行えます。
取得した値を利用し、様々な処理を行う事も可能です。
JavaScriptでdata属性の値を取得・出力する
<div id="box-color" data-boxcolor="orange"></div>const div = document.getElementById('box-color');
console.log(div.dataset.boxcolor);上記のように記述すると、コンソールに「orange」と出力されます。
jQueryでdata属性の値を取得・出力する
<div id="box-color" data-boxcolor="blue"></div>const result = $('div').data('boxcolor');
console.log(result);上記のように記述すると、コンソールに「blue」と出力されます。
このように、JavaScriptやkQueryでのdata属性の値の取得は簡単に出来るので、これを利用し様々な処理をする事が可能です。
さいごに
いかがでしたでしょうか。
今回は、HTML5のdata属性の使い方とJavaScriptやjQueryでの値の取得方法について解説しました。
data属性はCSSなどと比べて使用頻度は低いかと思いますが、使いこなすとJavaScriptやjQueryでの処理が便利になります。
