ywork2020.com

Title

カスタムデータを操作する

data-属性の概要

任意の要素に任意の名前のテキスト型データ領域を確保出来る属性です。
そのデータに対してjavasctiptからデータを入れたり、読みだしたりの操作が行えます。

実機サンプル



実機サンプルの補足

このページのサンプルではspanタグに data-text というデータ領域を確保してjavascriptからid属性経由でデータ操作しています。
参照する場合は、エレメント.dataset.text という記述でデータの読み書きを行っています。
属性(data-text) = スクリプト(.dataset.text)で相対しているところに着目してください。
また、1例ですが、data-user-name のようにハイフンを使ってデータ名を作った場合は、キャメルケースに置き換えて参照します。
上記の例の場合: element.dataset.userName となります。

サンプルコード

<body>
	<span id="idExample1" data-text="YWORK1-ON"></span><br>
	<span id="idExample2" data-text="YWORK2-ON"></span><br>
	<input id="idCheckBox" type="checkbox" checked>

	<script>
		let elmEx1 = document.getElementById("idExample1");
		let elmEx2 = document.getElementById("idExample2");
		let elmChk = document.getElementById("idCheckBox");
		elmEx1.innerHTML = elmEx1.dataset.text;
		elmEx2.innerHTML = elmEx2.dataset.text;

		elmChk.addEventListener("change",function(){
			if(elmChk.checked == true){
				elmEx1.dataset.text = "YWORK1-ON";
				elmEx2.dataset.text = "YWORK2-ON";
			}
			else{
				elmEx1.dataset.text = "YWORK1-OFF";
				elmEx2.dataset.text = "YWORK2-OFF";
			}
			elmEx1.innerHTML = elmEx1.dataset.text;
			elmEx2.innerHTML = elmEx2.dataset.text;
		},false);
	</script>
</body>
関連のあるページ