Как добавить класс к заданному элементу в JavaScript
Если вы хотите добавить класс к элементу HTML, не заменяя его существующий класс, вы можете сделать, как показано в следующем примере:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Add Class to an Element Using JavaScript</title>
<style>
.content{
padding: 20px;
border: 2px solid #ccc;
}
.highlight{
background: yellow;
}
</style>
</head><body> <div class="content" id="myDiv"> <p>This is a paragraph of text.</p> <button type="button" onclick="addNewClass();">Add Class</button> </div> <script> function addNewClass(){ // Выбераем элемент div по его атрибуту id var elem = document.getElementById("myDiv"); elem.className += " highlight"; } </script>
</body></html>В приведенном выше примере функция addNewClass() добавляет нового класс highlight к элементу DIV, у которого уже есть класс box, без его удаления или замены с помощью свойства className.
Кроме того, вы также можете использовать свойство classList для добавления / удаления классов у элемента, например:
<div class="alert info" id="myDiv">Important piece of information!</div>
<script>
// Выбор элемента
var elem = document.getElementById("myDiv");
elem.classList.add("highlight"); // Добавляем класс highlight
elem.classList.remove("alert"); // Удаляем класс alert
</script>Свойство classList поддерживается во всех современных браузерах. Не поддерживается в IE до версии 10.
