Как добавить класс к заданному элементу?

Чтобы найти ваш целевой элемент "d" любым удобным для вас способом, а затем добавить ему класс, можно использовать следующий код:

d.className += ' additionalClass'; // Обратите внимание на пробел

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

1. Проверка на существование класса:

if (!d.className.includes('additionalClass')) {
    d.className += ' additionalClass'; // Добавить класс, если его еще нет
}

2. Использование classList для управления классами:

d.classList.add('additionalClass'); // Добавляет класс, не дублируя его

Используя classList, вы гарантируете, что класс будет добавлен только в том случае, если он отсутствует у элемента, и вам не нужно заботиться о пробелах. Это более современный и безопасный метод!

Другой подход для добавления класса к элементу, используя чистый JavaScript

Для добавления класса:

document.getElementById("div1").classList.add("classToBeAdded");

Для удаления класса:

document.getElementById("div1").classList.remove("classToBeRemoved");

Таким образом, вы можете легко управлять классами элементов, используя методы classList.add() и classList.remove().

Первый способ добавления класса к элементу в JavaScript — это использование свойства className. Пример:

document.getElementById('some_id').className += '  someclassname';

Обратите внимание, что перед ' someclassname' важно оставить пробел, чтобы избежать проблем с объединением классов.

Второй способ — использование метода classList.add, что выглядит так:

document.getElementById('some_id').classList.add('someclassname');

В некоторых случаях первый подход может помочь, если второй не сработал. Для удаления класса можно использовать метод classList.remove:

document.getElementById('some_id').classList.remove('someclassname');

Эти подходы полезны при работе с классами элементов в DOM.

Когда работа, которую я выполняю, не требует использования библиотеки, я использую эти две функции:

function addClass( classname, element ) {
    var cn = element.className;
    // Проверка на существование
    if( cn.indexOf( classname ) != -1 ) {
        return;
    }
    // Добавляем пробел, если у элемента уже есть класс
    if( cn != '' ) {
        classname = ' '+classname;
    }
    element.className = cn + classname;
}

function removeClass( classname, element ) {
    var cn = element.className;
    var rxp = new RegExp( "\\s?\\b"+classname+"\\b", "g" );
    cn = cn.replace( rxp, '' );
    element.className = cn;
}

Эти функции позволяют добавлять и удалять классы у HTML-элементов без необходимости подключать сторонние библиотеки. Функция addClass добавляет указанный класс только в том случае, если он не существует у элемента, а removeClass удаляет указанный класс, если он присутствует. Это удобно для управления классами в ситуациях, когда не требуется сложная логика или дополнительные возможности, предоставляемые библиотеками, такими как jQuery.

Вы можете использовать методы classList.add или classList.remove для добавления/удаления класса у элемента.

var nameElem = document.getElementById("name");
nameElem.classList.add("anyclass");

Приведённый выше код добавляет (но НИ В КОЕМ СЛУЧАЕ не заменяет) класс "anyclass" к элементу nameElem. Аналогично, вы можете использовать метод classList.remove(), чтобы удалить класс.

nameElem.classList.remove("anyclass");