Cách kiểm tra element có chứa class trong JavaScript?

Sử dụng Element.classList.contains() (hiện đại) hoặc kiểm tra className (cũ).

Cách 1: classList.contains() — Khuyến nghị (ES5+)

<!DOCTYPE html>
<html>
<body>
    <div id="test" class="myClass otherClass"></div>
    <script>
        const el = document.getElementById('test');
        
        console.log(el.classList.contains('myClass'));    // true
        console.log(el.classList.contains('otherClass')); // true
        console.log(el.classList.contains('noClass'));    // false
        
        // Thêm/xóa/toggle
        el.classList.add('newClass');
        el.classList.remove('otherClass');
        el.classList.toggle('active');
    </script>
</body>
</html>

Cách 2: className + regex (Legacy)

function hasClass(element, className) {
    return (' ' + element.className + ' ').indexOf(' ' + className + ' ') > -1;
}

var el = document.getElementById('test');
console.log(hasClass(el, 'myClass')); // true

Cách 3: matches() selector

el.matches('.myClass'); // true

So sánh:

Lưu ý:

• classList trả về DOMTokenList (array-like, iterable).
• SVG element dùng classList từ Chrome 50+, Firefox 26+.
• Để kiểm tra nhiều class: el.classList.contains('a') && el.classList.contains('b').