この記事では、クラス名の有無の判定をして、条件分岐させる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;
}