Element.dataset - data属性を取得、変更する

投稿日: / 更新日:

JavaScriptの、Elementオブジェクトのdatasetはクラス属性を取得するプロパティです。

説明

Elementオブジェクトのdatasetプロパティは、その要素の全てのdata属性を含むオブジェクト(DOMStringMap)です。

<a data-syncer="true" data-arayutw="good" data-brown-squirrel="great">SYNCER</a>
// aElement = <a data-syncer="true" data-arayutw="good">SYNCER</a>

// aElement.datasetの取得
var dataset = aElement.dataset ;

取得できるオブジェクトには、data属性のdata-以降の部分(syncer)をキー名に、属性の値(true)をそのまま値にした、キーと値のペアが、data属性の数だけ含まれています。例えば上記の場合、datasetは次の構造になっています。

{
	syncer: "true",		// data-syncer
	arayutw: "good",	// data-arayutw
	brownSquirrel: "great"	// data-brown-squirrel
}

data-brown-squirrelのように途中にハイフンが入ったdata属性名の場合、キー名は、ハイフンを除いてハイフン直後の文字を大文字にします。例えばdata-brown-squirrelの場合はbrownSquirrelというキー名になるルールです。

data属性の各値を扱うには、ドット演算子で目的の値を持ったキー名を指定しましょう。通常のオブジェクトリテラルを取り扱うのと同じです。

// data属性の各値を代入
var a = dataset.syncer ; // "true"
var a = dataset.arayutw ; // "good"
var a = dataset.brownSquirrel ; // "great"

data属性の値を変更することもできます。

// data-syncerの値を変更
dataset.syncer = "false" ;
<a data-syncer="false" data-arayutw="good" data-brown-squirrel="great">SYNCER</a>

サンプルコード

<a id="target" data-syncer="true" data-arayutw="good">SYNCER</a>
// 要素を取得 ( → <a id="target" data-syncer="true" data-arayutw="good">SYNCER</a> )
var aElement = document.getElementById( "target" ) ;

// datasetを取得 ( → { syncer: "true", arayutw: "good" } )
var dataset = aElement.dataset ;
// 要素を取得 ( → <a id="target" data-syncer="true" data-arayutw="good">SYNCER</a> )
var aElement = document.getElementById( "target" ) ;

// datasetを変更 ( → <a id="target" data-syncer="true" data-arayutw="bad">SYNCER</a> )
aElement.dataset.arayutw = "bad" ;

デモ

a要素のdatasetプロパティを取得して表示します。また、data-brown-squirrelの値をcuteに変更します。コンソールでオブジェクトの中身を確認できます。

構文

readonly DOMStringMap dataset = Element.dataset

返り値

項目説明
dataset全てのdata属性を含んだオブジェクト(DOMStringMap)。

関連項目

外部リンク