Как узнать класс элемента: jQuery и нативный JavaScript

О проверке кода. Примеры в этой статье не запускались в браузере — в отличие от материалов по Node.js, где мы приводим фактический вывод консоли. Код приведён по документации jQuery и MDN. Говорим об этом прямо, а не ставим бейдж «проверено» там, где проверки не было.

Задача звучит просто: узнать, какой класс висит на элементе. Разберём оба способа — через jQuery и без него — и одну ловушку, из-за которой ответ кажется неверным.

Через jQuery

// вся строка классов целиком
const classes = $('#box').attr('class');   // "card card--wide active"

// проверка конкретного класса
if ($('#box').hasClass('active')) {
  // ...
}

attr('class') возвращает строку, а не массив: все классы через пробел, как они записаны в разметке. Если элементов по селектору несколько, вернётся класс первого — это общее поведение геттеров в jQuery.

hasClass работает наоборот: он проверит все найденные элементы и вернёт true, если класс есть хотя бы у одного.

То же самое без jQuery

const box = document.querySelector('#box');

box.className;                      // "card card--wide active" — строка
box.classList;                      // DOMTokenList: ["card", "card--wide", "active"]
box.classList.contains('active');   // true
[...box.classList];                 // обычный массив классов

classList — это то, ради чего hasClass больше не нужен. Он не просто читает, а даёт полноценный набор операций:

Разница в удобстве почти исчезла — а в паре мест нативный вариант даже лучше. classList.toggle('active', условие) вторым аргументом принимает флаг: класс будет добавлен при true и убран при false. В jQuery для этого пишут toggleClass('active', условие) — тут паритет, но classList.replace('old', 'new') аналога в jQuery не имеет вовсе.

Ловушка: класс есть, а стиля нет

Самая частая причина, по которой на эту страницу приходят: hasClass вернул true, а элемент выглядит по-старому.

JavaScript тут ни при чём. Класс в разметке и применённый стиль — разные вещи. Если правило не сработало, причина в CSS:

• специфичность — другое правило перебивает ваше (#id .card сильнее, чем .active);
• порядок — правило с тем же весом ниже по файлу выигрывает;
• !important в чужом стиле.

Проверять это нужно не в консоли, а во вкладке Computed инструментов разработчика: там видно, какое правило победило и какое зачёркнуто.

Классы и данные — не одно и то же

Отдельная привычка из 2010-х: хранить состояние в классах и потом его вычитывать.

// ❌ класс как хранилище данных
if ($el.hasClass('user-id-42')) { /* ... */ }

// ✅ данные — в data-атрибутах
const id = box.dataset.userId;   // из data-user-id="42"

Класс — про внешний вид. Данные — в data-* и читаются через dataset. Смешивать их удобно ровно до первого рефакторинга стилей, после которого логика ломается вместе с оформлением.

Нужен ли jQuery в 2026

Честный ответ: для работы с классами — нет. classList поддерживается всеми живыми браузерами и покрывает задачу целиком.

Но и выкидывать jQuery из работающего проекта ради этого не нужно. Он по-прежнему стоит на огромном числе сайтов и никуда не денется. Правило простое: есть в проекте — пользуйтесь; нет — не добавляйте ради классов.

Что было на этой странице в 2017 году

Первая версия вышла 1 августа 2017 года и решала задачу только через jQuery: attr('class') и hasClass(). Про classList в ней не было ни слова.

И это не упущение автора — это точный снимок эпохи. В 2017-м jQuery всё ещё был способом писать кроссбраузерный код, а classList в старых версиях Internet Explorer работал частично: в IE9 его не было вовсе, в IE10–11 он не поддерживал несколько аргументов и второй параметр toggle. Писать hasClass было проще, чем помнить эти оговорки.

Сегодня поддержка старых IE не нужна никому, и весь смысл прослойки испарился. Мы оставили решение через jQuery — по этому запросу приходят те, у кого он в проекте, — но добавили нативный вариант, потому что в новом коде правильный ответ именно он.

Смежные темы: получить значение атрибута; изменение стилей и классов; уроки JavaScript — весь раздел про язык.