data属性

domエレメントのdata attributeをJavaScriptからアクセス

• 目的の操作
  メソッドで操作
  プロパティで操作
• HTMLのデータ属性が下記の場合

  <img id="circle" data-img-src="/img/loading.gif">

  以下JavaScriptで下記定義済とする

  const ele = document.getElementById('circle');

• 取得

  ele.getAttribute('data-img-src')

  ele.dataset.imgSrc

• 設定

  ele.setAttribute('data-img-src','/img/loading.gif')

  ele.dataset.imgSrc = '/img/loading.gif'

• 削除

  ele.removeAttribute('data-img-src')

  delete ele.dataset.imgSrc

• 有無

  ele.hasAttribute('data-img-src')

  'imgSrc' in ele.dataset

• 【総括】
  メソッドは記述書式に統一感がありわかりやすい。
  取得と設定は直感的、削除と有無は目的に対してわかりやすい。
  data属性指定は先頭の「data-」と除き以後はハイフンを除いたキャメルケースで表現する。
  

• 目的の操作
  記述例
  説明
• contentで参照
  HTML記述

  <span data-tooltip="HyperText Markup Language">HTML</span>

  CSS記述

  span::after {
  	display:none;
  	content: attr(data-tooltip);
   }
   span:hover::after {
  	di	: block;
   }

  マウスのホバーでdata属性の値が表示される。
  引用元：data属性の使い方とは？
• contentで参照
  HTML記述

  <article data-number="1"> </article>
  <article data-number="2"> </article>

  CSS記述

  article[data-number='1'] {
  	background: pink;
  }
  article[data-number='2'] {
  	background: blue;
  }

  data属性の値で背景色を替える。
  引用元：data属性の使い方とは？