В 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
Установите свойство 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.