Help us understand the problem. What is going on with this article?

カスタムデータ属性について

カスタムデータ属性とは?

HTML5で新しく導入された、html要素に、カスタムデータと呼ばれる、独自の属性を指定する属性。
オリジナルの属性も作成できる。
カスタムデータ属性の名前は常にdataから始まる。
各種スクリプトで動的に使用可能であり、主にJavaScriptやjQueryで値を取得するときに使用されることが多い。

<div class="tweet" data-genre="movie">
属性名:data-id
属性値:tweet.id

本来的に、HTMLのclass属性の目的は、データを格納するためではなく、開発時にCSS等のスタイル情報を割り当てるため。
しかし、要素への情報が増えるたびに、その都度新しいクラスを追加する必要が出てきてしまう。
そうなると、JavaScriptで実際に必要な情報を取り出すことが難しくなる。
そのような背景のもと、HTML5で新たに導入された。

カスタムデータ属性のルール

HTMLでカスタムデータ属性を設定するルールは次のようなものがあります。

  • data以降に属性名を指定する
  • 属性名に使用できるのは、文字、数字、-(ハイフン)、.(ドット)、_(アンダースコア)のみで、大文字は使用できない
  • 属性値は数字も文字列も使用できるが、慣例的に小文字の使用が大半
  • class名を属性名として格納することはできない(データ属性を扱うのは、他に適切なHTML要素や属性がない場合だけに限るべきだから)

JavaScriptでの使い方

データ属性の取得

<div id="tweet" data-genre="movie"></div>
<script>
    var result = document.getElementById("tweet");
    var dataset = result.dataset;
    console.log(result);
</script>

実行結果

movie

データ属性の変更

<div id="tweet" data-genre="movie"></div>
<script>
    var result = document.getElementById("tweet");
    result.dataset.genre = 'movie';
    console.log(result);
</script>

実行結果

movie

jQueryでの使い方

データ属性の取得

対象要素.data( 属性名 )のように、引数へdata属性名を指定する。

<div class="tweet" data-genre="movie"></div>
<script>
    const result = $(".tweet").data('genre');
    console.log(result);
</script>

実行結果

movie

データ属性の変更

<div class="tweet" data-genre="movie"></div>
<script>
    const result = $(".tweet").data('genre', 'movie');
    console.log(result);
    const result = $(".tweet").data('genre', 'music');
    console.log(result);
</script>

実行結果

movie
music
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away