ハシウェブ

Web制作、プログラミングに関する情報を発信するブログ

【HTML】data属性の使い方 JavaScript・jQuery・CSSでの取得方法

【HTML】data属性の使い方 JavaScript・jQuery・CSSでの取得方法

「HTMLタグに自由にデータを持たせたい」
「データ属性って何?」

悩み

こういった悩みにお答えします。

目次
  1. data属性とは
  2. data属性の取得方法
    1. JavaScript
    2. jQuery
    3. CSS
  3. まとめ

data属性とは

data属性(カスタムデータ属性)とは、HTMLタグごとに決まっているデフォルト属性以外に自由に設定できる属性です。
data属性を使うとJavaScriptなどでデータの取り扱い(設定、取得)が便利になります。

古いデータベースのような複雑なWebサイトのソースを見てみると、id、class、nameなど本来の用途とは違った属性を器用に使ってデータを扱っているものもあります。
data属性を使えば、器用なデータ操作をせず、さらにデータの内容もわかりやすくデータを取り扱うことができるようになります。

使い方は、HTMLタグに「data-●●=""」を追加するだけです。
ひとつだけでなく複数追加できます。

以下、●●に使えない文字です。

  • 「 xml 」「 XML 」から始めてはならない
  • セミコロン(;)を含めてはならない
  • 「 A から Z 」(アルファベット大文字)含めてはならない

data属性の取得方法

data属性の簡単な取得方法をそれぞれ紹介します。
読み込んだ時点でdata-text属性を読み込み、出力しています。
応用次第ではjsプラグインやデータベース的な操作が必要な場合に役に立ちます。

JavaScript

JavaScriptを使って以下の出力をしています。

出力結果

<div id="box1" data-text="JavaScript"></div>
<script>
tag = document.getElementById("box1");
text = tag.getAttribute('data-text');
tag.textContent = text;
</script>

jQuery

jQueryを使って以下の出力をしています。
やっていることはJavaScriptと同じです。

出力結果

<div id="box2" data-text="jQuery"></div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
jQuery(function(){
  tag = jQuery("#box2")
  text = tag.data("text");
  tag.text(text);
});
</script>

CSS

CSSの場合はHTMLを書き換えることができないので、疑似要素:afterに出力しています。

出力結果

<div id="box3" data-text="CSS"></div>
<style>
#box3:after{
  content: attr(data-text);
}
</style>

まとめ

data属性について紹介しました。

コーディングだけをしているとあまり使わないものかもしれませんが、複雑なデータを取り扱うサイトや、いろいろなカスタマイズが必要なjsプラグインだとdata属性がとても役に立ちます。