ywork2020.com

Title

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

目次 (INDEX)

classNameとは

ここで説明するclassName とは次の語句からなるjavascriptのプロパティです。
class
読み: クラス
意味: 共通の性質を有する、部類、種類
name
読み: ネーム
意味: 名前

目次に戻る

classNameプロパティの概要

このプロパティは、要素の class 属性の値を取得、操作することができます。

Element (要素) はid属性の値や、Docmentオブジェクトのget系メソッドやquerySelector系のメソッドで特定します。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。

var classname = Element.className;
Element.className = "classname";

目次に戻る

サンプルコードと実行結果

このサンプルはクラス名=clsOutputAの要素を特定して、クラス名の変更を行います。 クラス名が変更されることでCSSで設定しているスタイルの適用も変更されます。

サンプルコード: CSS
<style>
	.clsOutputA, .clsOutputB{
		display: block;
		padding: 1em;
		font-size: 2em;
		border: medium solid ##lightsteelblue;
	}
	.clsOutputA{
		color: ##white;
		background-color: ##royalblue;
	}
	.clsOutputB{
		color: ##white;
		background-color: ##darkblue;
	}
</style>
サンプルコード: HTML
<body>
	<p>
		結果:<br>
		<output class ="clsOutputA">clsOutputA</output>
	</p>
	<p>
		実行:<br>
		<input type="button" value="クラスチェンジ" onclick="evtName()">
	</p>
	<script>...</script>
</body>
サンプルコード: script
<script>
	let elmOutput = document.querySelector(".clsOutputA");
	function evtName(){
		if(elmOutput.className == "clsOutputA"){
			elmOutput.className = "clsOutputB";
		}
		else{
			elmOutput.className = "clsOutputA";
		}
		elmOutput.innerText = elmOutput.className;
	}
</script>
  • 02: 要素の参照変数 (querySelectorメソッドでclsOutputAに該当する要素を特定し、参照を代入します。)
  • 03-11: 関数を作成 (evtNameという名前の関数です。)
  • 04-05: 条件式 (02: の要素のクラス名がclsOutputAならclsOutputBに変更します。)
  • 07-08: 条件式 (02: の要素のクラス名がclsOutputAでなければclsOutputAに変更します。)
  • 10: クラス名の出力 (output要素のコンテンツ( innerText) にクラス名を出力します。)
実行結果:

結果:
clsOutputA

実行:

目次に戻る