JavaScript

classList.contains()でクラス名の有無で条件分岐の判定する【JavaScript】

この記事では、クラス名の有無の判定をして、条件分岐させるclassList.containsについて解説します。

classList.contains()

使い方

element.classList.contains('クラス名')の形式で使います。

対象の要素にクラス名が含まれていれば「true」、含まれていなければ「false」が返ります。

サンプルコード

下記のようなHTMLにclassList.contains()を使ってみましょう。

<div id="target" class="apple">クラス名判定</div>
var target = document.getElementById('target');

console.log(target.classList.contains('apple'));
// => true

console.log(target.classList.contains('orange'));
// => false

クラス名が「apple」なので、ひとつ目はtrue、ふたつ目はfalseが返ります。

条件分岐の判定

true,falseが返るので、条件分岐の判定に使えます。

条件分岐のデモ

「toggleクラス」ボタンをクリックすると、クラス名の有無をclassList.toggle()で切り替えます。

「クラス名判定」ボタンをクリックすると、クラス名の有無を判定し、表示を切り替えます。

サンプルコード

<div id="target" class="apple">ターゲット</div>
<button onclick="classToggle();">toggleクラス</button>
<button onclick="classCheck();">クラス名判定</button>

<p>クラス名:<span id="output"></span></p>


function classToggle() {
	var target = document.getElementById('target');
	target.classList.toggle('apple');
}

function classCheck() {
	var target = document.getElementById('target');
	var output = document.getElementById('output');
  
	if (target.classList.contains('apple') == true ) {
		output.innerHTML = 'appleが含まれています。';
	} else {
 		output.innerHTML = 'appleが含まれていません。';
  }
}
.apple {
  color: red;
}

ウェブつくを支えてくれるスポンサー

  • この記事を書いた人
ウェブつく管理人

ウェブつく管理人

WEB制作の仕事をしています。より簡潔に、より分かりやすく解説していきたいと思い、サイトを運営しています。「読むのが苦にならないサイト」を目指しています。よろしくお願いします。

-JavaScript
-

© 2020 ウェブつく Powered by AFFINGER5