html data-* 属性

今更だが、html5では任意のタグにdata-*属性を設定できる。
設定したdata属性は、簡単に取得することができる。

サンプルHTML

data attribute test test data

サンプルスクリプト

data属性の値はdatasetを通じて取得することができる。

var myTestData = document.getElementById("data1").dataset.myTestData;

data属性の”data-“は取り除き、キャメルケースで指定すると取得できる。
しかし、この方法はChorme,Firefox,Edgeで成功したが、InternetExplorerでは、
ドキュメントモードがEdgeの場合にのみ動作した。
InternetExplorerがクライアントとして訪れるのであれば、datasetという新しい方法は用いずに、従来通りのgetAttributeを使う。

var myTestData = document.getElementById("data1").getAttribute("data-my-test-data");

name属性やclass属性を取得するのと同じく、ただ属性を取得しているだけなので、名称の変換などは行わずに指定する。

まとめ

data属性は便利だ。今まではキー情報などをtitle属性に設定してみたりしていたが、そうするとカーソルが当たった時など、その中身が見えてしまいデバッグはしやすいが、恥ずかしい場合もあった。
これで、いろいろ隠して設定できる。

同じタグの記事

同じカテゴリの記事

html data-* 属性

html data-* 属性

サンプルHTML

サンプルスクリプト

まとめ

コメント

コメントを残す