Как изменить класс элемента на JavaScript: лучшие практики 2025

Как изменить класс элемента на JavaScript: от новичка до профи в 2025 году

Вы когда-нибудь хотели, чтобы кнопка на сайте меняла цвет при клике, а меню — плавно выезжало? Всё это — магия изменения классов. Вопрос «How can I change an element's class with JavaScript?» — один из самых популярных на Stack Overflow (десятки тысяч просмотров). И не зря: без этого навыка сложно представить современную веб-разработку.

В 2025 году браузеры стали ещё умнее, но базовый инструмент остался прежним — classList. В этой статье мы разберём все способы изменить класс элемента на JavaScript: от классики до современных приёмов. Вы узнаете, как не наступать на грабли и писать код, который не стыдно показать на собеседовании.

Почему изменение класса — это важно?

Представьте, что вы строите дом из кубиков. Каждый кубик — HTML-элемент, а классы — это наклейки, которые говорят: «я красный», «я анимированный», «я скрыт». Когда пользователь нажимает кнопку, вы просто меняете наклейку — и элемент оживает. Без изменения классов пришлось бы перерисовывать весь интерфейс, а это медленно и грустно.

В 2025 году изменить класс элемента на JavaScript — это базовая операция, которая используется в 9 из 10 интерактивных сайтов. От модальных окон до тёмной темы — всё держится на классах.

Чистый JavaScript: classList — ваш главный инструмент

Если вы до сих пор используете className и конкатенацию строк — остановитесь. В 2025 году есть classList. Это встроенный API, который работает во всех современных браузерах (да, даже в Safari).

Вот как он выглядит:

// Получаем элемент
const button = document.querySelector('.my-button');

// Добавляем класс
button.classList.add('active');

// Удаляем класс
button.classList.remove('active');

// Переключаем класс
button.classList.toggle('active');

// Проверяем, есть ли класс
if (button.classList.contains('active')) {
  console.log('Кнопка активна!');
}

Этот код — база, которую должен знать каждый. Но есть нюансы, которые превращают хороший код в отличный.

Множественные классы: добавляем и удаляем за раз

Хотите добавить несколько классов одновременно? Легко:

element.classList.add('visible', 'animated', 'highlight');

То же самое с удалением:

element.classList.remove('hidden', 'fade-out');

Это работает даже в Internet Explorer 11 (если вы вдруг поддерживаете древности). В 2025 году это стандарт.

Замена класса: замена одного на другой

Иногда нужно заменить один класс на другой. Например, переключить иконку с «солнце» на «луну». Для этого есть метод replace:

element.classList.replace('icon-sun', 'icon-moon');

Если класса icon-sun нет — ничего не произойдёт, ошибки не будет. Это безопасно и читаемо.

Условное переключение: toggle с булевым флагом

Метод toggle может принимать второй аргумент — булево значение. Если true — класс добавится, если false — удалится. Это удобно, когда вы хотите синхронизировать класс с состоянием:

const isDarkMode = true;
element.classList.toggle('dark', isDarkMode); // добавит 'dark'

const isLoggedIn = false;
element.classList.toggle('logged-in', isLoggedIn); // удалит 'logged-in'

Это гораздо чище, чем писать if-else.

А как же className? Когда он нужен?

Старый добрый className всё ещё жив, но его время прошло. Он заменяет все классы сразу:

element.className = 'new-class another-class';

Проблема: если у элемента уже были классы, они сотрутся. В 2025 году className используют только в двух случаях:

• Когда нужно полностью сбросить все классы (например, для инициализации).
• Когда вы работаете с SVG-элементами (там classList не всегда дружит).

В остальном — забудьте.

Реальный пример: тёмная тема за 5 строк

Давайте сделаем переключатель тёмной темы — классика 2025 года:

const toggleButton = document.getElementById('theme-toggle');
const body = document.body;

toggleButton.addEventListener('click', () => {
  body.classList.toggle('dark-theme');
  // Сохраняем выбор пользователя
  localStorage.setItem('theme', body.classList.contains('dark-theme') ? 'dark' : 'light');
});

// Восстанавливаем тему при загрузке
const savedTheme = localStorage.getItem('theme');
if (savedTheme === 'dark') {
  body.classList.add('dark-theme');
}

Всё. Никаких костылей, никаких jQuery. Чистый JavaScript, который работает везде.

Работа с несколькими элементами: циклы и forEach

Когда нужно изменить класс у группы элементов, не делайте так:

// Плохо
const items = document.querySelectorAll('.item');
for (let i = 0; i < items.length; i++) {
  items[i].classList.add('highlight');
}

В 2025 году у NodeList есть forEach:

// Хорошо
document.querySelectorAll('.item').forEach(item => {
  item.classList.add('highlight');
});

Короче, читаемее, современнее.

Частые ошибки новичков (и как их избежать)

Даже опытные разработчики иногда спотыкаются. Вот топ-3 ошибки:

1. Забыли точку в querySelector. .my-class — это класс, #my-id — это id. Без точки или решётки — селектор тега.
2. Путают className и classList. className — строка, classList — объект. Не пытайтесь написать element.classList = 'new' — это не сработает.
3. Изменяют класс до загрузки DOM. Если скрипт в head, элемента может не быть. Используйте DOMContentLoaded или ставьте скрипт в конец body.

А что насчёт производительности?

В 2025 году браузеры оптимизированы под classList. Изменение класса — это микросекунды. Но есть один совет: не меняйте классы в цикле на 10 000 элементов. Вместо этого измените класс у контейнера и используйте CSS-каскад. Например, вместо того чтобы добавлять класс каждому <li>, добавьте его <ul> и напишите стили:

ul.dark-theme li {
  background: #333;
  color: #fff;
}

Это в разы быстрее.