[JavaScript] HTMLタグに独自属性を設定する（dataset）

投稿日：2017年12月12日更新日：2018年4月28日

HTMLタグに独自の属性を設定したい場合は、datasetという仕組みを使用します。

カスタムデータ属性とも呼ばれます

サンプル

例）datasetを使ったサンプル

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Sample</title>
<script>
function test(){
  //オブジェクトを取得
  var obj1 = document.getElementById("d1");  //以下"d1"と表記
  var obj2 = document.getElementById("d2");  //以下"d2"と表記

  //"d1"と"d2"の属性「hoge」を取得
  console.log(obj1.dataset.hoge);  //⇒みかん
  console.log(obj2.dataset.aa);    //⇒りんご

  //"d1"に未定義の属性「fuga」を取得
  console.log(obj1.dataset.fuga);  //⇒undefined

  //"d1"に属性「fuga」値「ぶどう」を設定
  obj1.dataset.fuga = "ぶどう";

  //"d1"の属性「fuga」を取得
  console.log(obj1.dataset.fuga);  //⇒ぶどう

  //"d1"の属性「hoge」の値を「柿」に変更する
  obj1.dataset.hoge = "柿";
}
</script>
</head>
<body>
  <div id="d1" data-hoge="みかん"></div>
  <div id="d2" data-hoge="りんご"></div>
  <input type="button" id="btn1" value="ボタン" onclick="test();">
</body>
</html>

<!DOCTYPE html>

<head>

<title>Sample</title>

function test(){

//オブジェクトを取得

var obj1 = document.getElementById("d1"); //以下"d1"と表記

var obj2 = document.getElementById("d2"); //以下"d2"と表記

//"d1"と"d2"の属性「hoge」を取得

console.log(obj1.dataset.hoge); //⇒みかん

console.log(obj2.dataset.aa); //⇒りんご

//"d1"に未定義の属性「fuga」を取得

console.log(obj1.dataset.fuga); //⇒undefined

//"d1"に属性「fuga」値「ぶどう」を設定

obj1.dataset.fuga = "ぶどう";

//"d1"の属性「fuga」を取得

console.log(obj1.dataset.fuga); //⇒ぶどう

//"d1"の属性「hoge」の値を「柿」に変更する

obj1.dataset.hoge = "柿";

}

</script>

</head>

<body>

</body>

</html>

解説

タグに直接書く場合は、「"data-" + ＜属性名＞="＜値＞"」とします。
属性名には、１文字以上のアルファベット、数字、ハイフン「-」、アンダースコア「_」、ドット「.」、コロン「:」が使用できます。

執筆者：とら