[JavaScript] HTMLタグに独自属性を追加/取得する

投稿日：2017年10月4日

HTMLタグに独自属性を追加/取得するサンプルです。

独自属性をセットする場合は .setAttribute()、
独自属性から値を取得する場合は .getAttribute()を使用します。

構文

独自属性を設定する: //要素objにパラメータ「p1」、値「hoge」を設定する obj.setAttribute("p1", "hoge");

属性値を取得する: //要素objのパラメータ「p1」の値を取得する var zz = obj.getAttribute("p1");

サンプル

例）ボタンを押すと、独自属性「p1」の値を表示する

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>サンプル</title>
<script>
function test(obj){
  var zz = obj.getAttribute("p1");  //パラメータp1の値を取得
  alert(zz);
}
</script>
</head>
<body>
  <input type="button" value="ボタン１" p1="AA" onclick="test(this);">
  <input type="button" value="ボタン２" p1="BB" onclick="test(this);">
  <input type="button" value="ボタン３" p1="CC" onclick="test(this);">
</body>
</html>

<!DOCTYPE html>

<head>

function test(obj){

var zz = obj.getAttribute("p1"); //パラメータp1の値を取得

alert(zz);

}

</script>

</head>

<body>

</body>

</html>

例）要素「b1」に、独自属性「p1」値「hoge」を設定する

var obj = document.getElementById("b1");
obj.setAttribute("p1", "ZZZ");

1 2	var obj = document.getElementById("b1"); obj.setAttribute("p1", "ZZZ");

解説

未設定の属性を取得すると値はnullになります。

執筆者：とら