ywork2020.com

Title

クラスリストで要素のクラス名を操作する

classListプロパティの概要

classListプロパティは、HTML要素のclass属性を参照できるプロパティです。
実際の使用方法としてはHTML要素を特定する必要があるので、documentオブジェクトのgetElementByIdメソッドなどで要素を特定して、 classListプロパティを参照する方法が用いられ、そこから下位に繋がるプロパティやメソッドを使用することでclass属性の値の操作や取得を実行することになります。

実機サンプルとサンプルコード

classListプロパティから下位のメソッドやプロパティを利用することで、その要素のclass属性の値を操作することができます。

サンプルCSSのコード

classListプロパティの説明に入る前に結果表示のサンプルとして使用しているCSSのコードを紹介しておきます。  1つ目のセレクター名をclass仕様の「.」と +「class名」を使い「.clsPink」として要素の背景色をピンクと定義しています。  2つ目のセレクター名をclass仕様の「.」と +「class名」を使い「.clsAqua」として要素の背景色をアクアと定義しています。 
.clsPink{
	background-color: pink;
}
.clsAqua{
	background-color: aqua;
}

classList.valueプロパティでclass属性を追加する

答え: id="idAnswer1"
この要素にプログラムの結果が反映されます。

実行:

 
<body>
	<p>
		<samp id="idAnswer1">この要素にプログラムの結果が反映されます。</samp>
	</p>
	<p>
		<input type="button" value="valueプロパティでclass属性を追加" onclick="evtName1()">
	</p>
	<script type="text/javascript">
	document.open();
	let elmAnswer1 = document.getElementById("idAnswer1");
	function evtName1(){
		elmAnswer1.classList.value = "clsPink";
	}
	document.close();
	</script>
</body>

classList.valueプロパティでclass属性を削除する

答え: id="idAnswer2"
この要素にプログラムの結果が反映されます。

実行:

 
<body>
	<p>
		<span id="idAnswer2" class="clsPink">この要素にプログラムの結果が反映されます。</span>
	</p>
	<p>
		<input type="button" value="valueプロパティでclass属性を削除" onclick="evtName2()">
	</p>
	<script type="text/javascript">
		document.open();
		let elmAnswer2 = document.getElementById("idAnswer2");
		function evtName2(){
			elmAnswer2.classList.value = "";
		}
		document.close();
	</script>
</body>

classList.addメソッドでclass属性を追加する

答え: id="idAnswer3"
この要素にプログラムの結果が反映されます。

実行:

 
<body>
	<p>
		<span id="idAnswer3">この要素にプログラムの結果が反映されます。</span>
	</p>
	<p>
		<input type="button" value="classList.addメソッドでclassを追加" onclick="evtName3()">
	</p>
	<script type="text/javascript">
		document.open();
		let elmAnswer3 = document.getElementById("idAnswer3");
		function evtName3(){
			elmAnswer3.classList.add("clsPink");
		}
		document.close();
	</script>
</body>

classList.removeメソッドでclass属性を削除する

答え: id="idAnswer4"
この要素にプログラムの結果が反映されます。

実行:

 
<body>
	<p>
		<span id="idAnswer4" class="clsPink">この要素にプログラムの結果が反映されます。</span>
	</p>
	<p>
		<input type="button" value="classList.removeメソッドでclassを削除" onclick="evtName4()">
	</p>
	<script type="text/javascript">
		document.open();
		let elmAnswer4 = document.getElementById("idAnswer4");
		function evtName4(){
			elmAnswer4.classList.remove("clsPink");
		}
		document.close();
	</script>
</body>

classList.containsメソッドでclass属性値の有無を確認する

答え: id="idAnswer5"
この要素にプログラムの結果が反映されます。

実行:

 
<body>
	<p>
		<span id="idAnswer5" class="clsPink">この要素にプログラムの結果が反映されます。</span>
	</p>
	<p>
		<input type="button" value="classList.containsメソッドでclass属性値の有無を確認" onclick="evtName5()">
	</p>
	<script type="text/javascript">
		document.open();
		let elmAnswer5 = document.getElementById("idAnswer5");
		function evtName5(){
			elmAnswer5.innerText = elmAnswer5.classList.contains("clsPink");
		}
		document.close();
	</script>
</body>

classList.toggleメソッドでclass属性の適用を交互にON,OFFする

答え: id="idAnswer6"
この要素にプログラムの結果が反映されます。

実行:

 
<body>
	<p>
		<span id="idAnswer6">この要素にプログラムの結果が反映されます。</span>
	</p>
	<p>
		<input type="button" value="classList.toggleメソッドでclass属性の適用を交互にON,OFF" onclick="evtName6()">
	</p>
	<script type="text/javascript">
		document.open();
		let elmAnswer6 = document.getElementById("idAnswer6");
		function evtName6(){
			elmAnswer6.classList.toggle("clsPink");
		}
		document.close();
	</script>
</body>

classList.replaceメソッドでclass属性を置き換える

答え: id="idAnswer7"
この要素にプログラムの結果が反映されます。

実行:

 
<body>
	<p>
		<span id="idAnswer7" class="clsPink">この要素にプログラムの結果が反映されます。</span>
	</p>
	<p>
		<input type="button" value="classList.replaceメソッドでclassを置き換え" onclick="evtName7()">
	</p>
	<script type="text/javascript">
		document.open();
		let elmAnswer7 = document.getElementById("idAnswer7");
		function evtName7(){
			if(elmAnswer7.classList.value=="clsPink"){
				elmAnswer7.classList.replace("clsPink","clsAqua");
			}
			else{
				elmAnswer7.classList.replace("clsAqua","clsPink");
			}
		}
		document.close();
	</script>
</body>