data属性

 
Web Tips.
Booskanium's
Booskanium's Web Tips.

ちゅんラヂのバンドル環境整備メモ

data属性はウェブアプリを作成する上で便利な機能です。

HTMLタグへの記述

HTMLのデータ属性の記述
<img id="circle" data-img-src="http://7design.jp/img/loading.gif">
先頭の「data-」で始まるのがdata属性、
以後は適切な単語をハイフンでつなげる。

JavaScriptから利用

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-」と除き以後はハイフンを除いたキャメルケースで表現する。

CSSで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属性の使い方とは?