html data-* 属性

html data-* 属性

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

サンプルHTML

1
2
3
4
5
6
7
8
9
10
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>data attribute test</title>
  </head>
  <body>
    <span id="data1" data-my-test-data="hello world!">test data</span>
  </body>
</html>

サンプルスクリプト

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

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

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

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

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

まとめ

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

同じタグの記事
同じカテゴリの記事

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA