I needed to use element.classList.contains('some-class') to check if an element contains at least one of three classes, so I wrote:

if (element.classList.contains('class1', 'class2', 'class3')) {
  // do stuff here
}

The result was - if the element has 'class1', it returns true, no matter if it has 'class2' or/and 'class3', and // do stuff here executes. However, if it has 'class2' and/or 'class3', it returns false and // do stuff here does not execute.

I worked around it with:

if (element.classList.contains('class1') || element.classList.contains('class2') || element.classList.contains('class3')) {
  // do stuff here 
}

I needed to use element.classList.contains('some-class') to check if an element contains at least one of three classes, so I wrote:

if (element.classList.contains('class1', 'class2', 'class3')) {
  // do stuff here
}

The result was - if the element has 'class1', it returns true, no matter if it has 'class2' or/and 'class3', and // do stuff here executes. However, if it has 'class2' and/or 'class3', it returns false and // do stuff here does not execute.

I worked around it with:

if (element.classList.contains('class1') || element.classList.contains('class2') || element.classList.contains('class3')) {
  // do stuff here 
}

• javascript

• contains - Checks if an element's list of classes contains a specific class. dom.spec.whatwg.org/#interface-domtokenlist So yes, you will need to check if an element contains A or contains B or contains C – Xotic750 Commented Dec 19, 2014 at 13:06

5 Answers 5

This function only takes one parameter. The contains method is used to check if your classList contains a singular element. The code block that you have posted at the bottom is a good workaround. But unfortunately what you are trying to do at the top is beyond the reach of the classList API.

It tells you if the class name you pass as the first argument is one of the classes the element is a member of.

As with all JavaScript functions, you can pass as many additional arguments are you like. The contains function just doesn't do anything with them.

var c = element.classList;
var any = c.contains( 'class1' ) || c.contains( 'class2' ) || c.contains( 'class3' );
var all = c.contains( 'class1' ) && c.contains( 'class2' ) && c.contains( 'class3' );

try document.querySelectorAll

HTML:

<div class="class1"></div>
<!--<div class="class2"></div> -->
<!-- <div class="class3"></div> -->

<div id="result"></div>

Javascript

var el = document.querySelectorAll('.class1, .class2, .class3');
var result = document.getElementById('result');

result.innerHTML = el.length;

demo: https://codepen.io/fatihhayri/pen/weqzWE

It works for me like this:

let elem = document.querySelector("span");

if (elem.classList.contains('beta')) {
elem.textContent = "The classList contains 'beta'";
} else {
elem.textContent = "The classList does not contain 'beta'";
}

<span class="alpha beta gamma"></span>