Как добавить CSS-класс к элементу с помощью JavaScript?

classList — это удобная альтернатива для доступа к списку классов элемента. Дополнительную информацию можно найти на сайте MDN.

Следует учитывать, что classList не поддерживается в Internet Explorer версий младше 10.

Когда у элемента уже есть определённое имя класса, его влияние на элемент связано с его позицией в строке имен классов. Поздние классы переопределяют более ранние, если возникает конфликт.

Добавление класса к элементу должно переместить имя класса в начало списка, если оно уже существует. Ниже приведен пример функции addClass, которая демонстрирует такое поведение:

document.addClass = function(el, css) {
    var tem, C = el.className.split(/\s+/), A = [];
    while (C.length) {
        tem = C.shift();
        if (tem && tem != css) A[A.length] = tem;
    }
    A[A.length] = css;
    return el.className = A.join(' ');
}

В этой функции мы сначала разбиваем текущее имя класса элемента на массив, затем проходим по этому массиву и добавляем все классы, кроме того, который мы хотим добавить, в новый массив A. После этого добавляем новый класс в конец массива A и, в конце, присваиваем el.className строку из массива A, объединённую пробелами. Это сохраняет требуемый порядок классов с новыми классами, которые появляются в конце списка.

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

element.className += ' новый-класс';

Таким образом, вы добавите новый класс к уже существующим классам элемента. Обратите внимание, что перед добавлением стоит убедиться, что между классами есть пробел, если элемент уже имеет классы.

Функция addClass предназначена для добавления одного или нескольких классов к элементу на странице. Ниже приведен пример реализации:

addClass = (selector, classes) => 
    document.querySelector(selector).classList.add(...classes.split(' '));

Эта функция принимает два аргумента: selector — селектор для выбора элемента, и classes — строку с одним или несколькими классами, которые необходимо добавить. Внутри функции происходит следующее:

1. Элемент выбирается с помощью document.querySelector(selector).
2. Классы разделяются по пробелам с помощью classes.split(' ').
3. Каждый класс добавляется к элементу с использованием метода classList.add().

Примеры использования:

addClass('#myDiv', 'back-red'); // Добавляет класс "back-red" к <div id="myDiv"/>
addClass('#myDiv', 'fa fa-car'); // Добавляет два класса "fa" и "fa-car" к "div"

Таким образом, функция позволяет легко добавлять как один, так и несколько классов к указанному элементу.