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

Пользователь

от rodger.botsford , в категории: HTML/CSS , 8 месяцев назад

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от jazmyne , 8 месяцев назад

@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.

Пользователь

от narciso , 4 дня назад

@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");
}