HTMLデータ属性活用術

HTMLタグには様々な属性がありますね。
普段はaタグに対するhref、imgタグに対するsrcなど「このタグにはこの属性！」と決まった属性を指定しているかと思います。
しかしJavascriptで動きを付けたりデータを処理したりしようとした場合、オリジナルの属性を付与したいな・・・と思うときが、極稀によくあると思います。
そこで使えるのが「データ属性」になります。

データ属性は、<p data-XXX="NNN"></p> といった形で、任意のタグに対し、「data-」から始まる好きな名称で属性を付与し、その値をセットできます。
これによってCSSやJavascriptから自由自在に参照・書き換えが行えるようになります。

使えるケースは極稀かもしれませんが、知っておくと活用できるタイミングがあるかもしれません。

では早速、使い方を以下でご紹介していきます。

CSSでの活用編

データ属性の値をCSSで呼び出す方法

「annotation」の部分は任意の名称を命名できます。

html

<p data-annotation="注釈文をここで指定1">
    本文１
</p>

<p data-annotation="注釈文をここで指定2">
    本文２
</p>

css

p::after {
  content: attr(data-annotation);/* attr(XXX)で属性を指定することで値を呼び出します */
}

データ属性の値に応じたセレクター指定

データ属性の内容に応じて、スタイルを書き分けることも可能です

css

p[data-annotation="注釈文をここで指定2"] {/*data属性が特定の内容の要素*/
  color: blue;
}

p[data-annotation=""] {/*data属性が空の要素*/
  color: red;
}

p[data-annotation] {/*data属性を持っている要素*/
  font-weight: bold;
}

See the Pen データ属性の値をCSSで呼び出す by g59taxi (@g59taxi) on CodePen.

Javascriptでの活用編

Javascriptでdata属性を利用する場合は、”dataset”で扱うことができます。

データの読み込み

<p data-main-text="本文" data-annotation="注釈文"></p>

<script>
  let element = document.querySelector("p");//要素を取得
  
  let result = element.dataset;//対象要素に指定されているすべてのデータ属性を取得
  console.log(result);//取得結果 -> {mainText: "本文", annotation: "注釈文"}

  result = element.dataset.mainText;//data-main-textに指定されているすべてのデータ属性を取得
  console.log(result);//取得結果 -> "本文"
</script>

※data-main-textのように、ハイフンで接続されているケバブケースで書かれた要素名は、mainTextといったキャメルケースで指定します

データのセット

<p data-main-text="本文" data-annotation="注釈文"></p>

<script>
  let element = document.querySelector("p");//要素を取得
  console.log(element.dataset);//取得結果 -> {mainText: "本文", annotation: "注釈文"}
  
  element.dataset.annotation = "データの書き換え";
  console.log(element.dataset);//取得結果 -> {mainText: "本文", annotation: "データの書き換え"}

  element.dataset.key = "value";//新たに data-key 属性に value をセットする
  console.log(element.dataset);//取得結果 -> {mainText: "本文", annotation: "データの書き換え", key: "value"}
  console.log(element.dataset.key);//"value"
</script>

jQueryでの活用編

jQueryでデータ属性利用する場合は、”data()”で扱うことができます

データの読み込み

<p data-main-text="本文" data-annotation="注釈文"></p>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
  $(function(){
    let $element = $('p');

    let result = $element.data();//対象要素に指定されているすべてのデータ属性を取得
    console.log(result);//取得結果 -> {mainText: "本文", annotation="注釈文"}
    
    result = $element.data('main-text');//対象要素に指定されている、特定のデータ属性を取得
    console.log(result);//取得結果 -> "本文"
  });
</script>

※jQueryの場合は、ケバブケースのままでもキャメルケースでの指定も可能です。

データのセット

<p data-main-text="本文" data-annotation="注釈文"></p>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
  $(function(){
    let $element = $('p');
    console.log($element.data());//取得結果 -> {mainText: "本文", annotation: "注釈文"}
    
    $element.data('annotation',"データの書き換え");//既存のdata属性の値を上書き
    console.log($element.data());//取得結果 ->  {mainText: "本文", annotation: "データの書き換え"}
    
    $element.data('key','value');//新たに data-key 属性に value をセットする
    console.log($element.data());//取得結果 ->  {mainText: "本文", annotation: "データの書き換え", key: "value"}
    console.log($element.data('key'));//取得結果 -> "value"
  });
</script>