SYNCERのロゴ
アイキャッチ画像

data-*属性 - カスタムデータ属性

data-*属性は、要素に任意のキーと値を設定するための属性です。主にJavaScriptでDOMを操作するための属性です。

概要

DOM Interface
HTMLElement.dataset
仕様書
https://html.spec.whatwg.org/multipage/dom.html#attr-data-*

説明

data-*属性は、名前と値の両方を任意に設定できる属性です。

属性名

属性名はdata-以降に任意の名前を付けて下さい。ハイフン(-)とドット(.)とアンダーライン(_)、そしてアルファベットの小文字を使用できます。大文字は小文字で解釈されるので、使用してはいけません。

<div data-syncer></div>
<div data-syncer-category></div>

属性値

属性値は、他の属性と同じように指定できます。

<div data-syncer="15"></div>
<div data-syncer-category="travel"></div>

値の取得

この属性は主に、JavaScriptで何らかの処理の材料とするための用途で利用します。data-*属性の値は次のように取得できます。DOMStringMapを利用する場合、属性名はハイフン(-)がなくなり、その直後の1文字が大文字に置き換わる点にご注意下さい。

<div id="hoge" data-syncer-category="travel"></div>
var element = document.getElementById( "hoge" ) ;

// getAttribute()を利用する場合
var value = element.getAttribute( "data-syncer-category" ) ;	// "travel"

// DOMStringMapを利用する場合
var value = element.dataset.syncerCategory ;	// "travel"

サポート状況

クリックすると、バージョンごとの対応状況を確認できます。

ChromeFirefoxSafariEdgeIEOperaiOS SafariAndroid
  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年10月3日 (火)
コンテンツを公開しました。