Как изменить класс элемента с помощью JavaScript

В JavaScript класс элемента — это способ его категоризации и стилизации с помощью CSS. Это строковое значение, которое можно присвоить свойству className элемента HTML. Классы позволяют использовать несколько элементов с одинаковым стилем или поведением. , что сделает ваш код более эффективным и удобным в сопровождении.

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

var el = document.getElementById("elementID");

el.classList.add('my-class'); // adding class 'my-class' for element with id = elementID

el.classList.remove('my-class'); // removing class 'my-class' for element with id = elementID

if (el.classList.contains('my-class')) // check if element with id = elementID contains class 'my-class'

el.classList.toggle('my-class'); // remove class 'my-class' for element with ID = elementID if that class exists, or add it if not

Чтобы изменить класс в JavaScript, мы также можем использовать свойство className

Установите свойство className, чтобы заменить все текущие классы одним или несколькими новыми классами:

document.getElementById("elementID").className = "my-class";

Чтобы добавить класс my-class к элементу, используйте следующий код:

document.getElementById("elementID").className += "my-class";

Чтобы удалить класс my-class из элемента, используйте следующий код:

document.getElementById("elementID").className =
   document.getElementById("elementID").className.replace( /(?:^|\s)my-class(?!\S)/g , '' );

Чтобы проверить, содержит ли элемент определенный класс:

if (document.getElementById("elementID").className.match(/(?:^|\s)my-class(?!\S)/) )

В этом уроке мы описали, как изменить класс элемента с помощью JavaScript.