html にてタグに任意の属性と値を代入して扱う

最終更新日:

例えば input タグには id や class の属性の他に name や type など使うことができる。
これらの属性を使って javascript で色々処理することがあると思う。

そういう時に元々用意された属性だけでは物足りない事がある。
任意の属性は data-xxxxx とすることで javascript 側で扱う事が可能になる。

サンプルコード

  • target.dataset で取得できる
    • 全て String になる
    • data-sameNumber のようにキャメルで書くと dataset.samenumber に変換される
    • data-hello-world のようにチェーンで書くと dataset.helloWorld に変換される
<!doctype html>

<html>
<head>
	<meta charset="utf8">
	<title>attr in tag - js html sample</title>
</head>

<body>

	<div
		id="div"
		data-sameNumber=1
		data-array=[1,2,3,4,5]
		data-hello-world="hello, world"
	></div>

	<script type="text/javascript">
		(function() {
			const target = document.getElementById('div')
			if (!target) { return }
			console.log(target.dataset)
			// {
			//     array: "[1,2,3,4,5]",
			//     samenumber: "1",
			//     helloWorld: "hello, world",
			// }
		})()
	</script>
</body>
</html>