Как изменить класс в html через javascript?

@rodger.botsford 

Вы можете изменить класс элемента HTML с помощью JavaScript, используя свойство className. Вот пример:

HTML:

1

<div id="myElement" class="oldClass">Пример элемента</div>

JavaScript:

1
2
3
4
5

// Получаем элемент по его id
var element = document.getElementById("myElement");

// Изменяем класс элемента
element.className = "newClass";

После выполнения этого кода, класс элемента изменится с oldClass на newClass.

@rodger.botsford 

Можно также использовать методы classList, которые предоставляют более гибкие возможности для работы с классами элементов. Вот пример использования classList:

HTML:

1

<div id="myElement" class="oldClass">Пример элемента</div>

JavaScript:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

// Получаем элемент по его id
var element = document.getElementById("myElement");

// Добавляем новый класс
element.classList.add("newClass");

// Удаляем старый класс
element.classList.remove("oldClass");

// Переключаем классы
element.classList.toggle("anotherClass");

Методы add() добавляет указанный класс элементу, remove() удаляет указанный класс, а toggle() добавляет класс, если его нет на элементе, и удаляет, если уже есть.

Использование classList также удобно, если вам нужно работать с несколькими классами одновременно. Например, вы можете проверить наличие класса перед его добавлением или удалением с помощью метода contains():

1
2
3
4

if (element.classList.contains("oldClass")) {
    element.classList.remove("oldClass");
    element.classList.add("newClass");
}