В современных браузерах вы можете использовать свойство classList элемента DOM для динамического добавления, удаления или переключения классов CSS в элементы HTML с помощью JavaScript.
В следующем примере показано, как изменить класс элемента DIV при нажатии кнопки. Это работает во всех основных браузерах, таких как Chrome, Firefox, Microsoft Edge, Safari и т. д.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Change an Element's Class with JavaScript</title>
<style>
.highlight{
background: yellow;
}
.bordered{
border: 5px solid #000;
}
.padded{
padding: 20px;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div id="content">
<h1>This is a heading</h1>
<p>This is a paragraph of text.</p>
</div>
<p>
<button type="button" onclick="addSingleClass()">Add Highlight Class</button>
<button type="button" onclick="addMultipleClass()">Add Bordered and Padded Class</button>
</p>
<p>
<button type="button" onclick="removeSingleClass()">Remove Highlight Class</button>
<button type="button" onclick="removeMultipleClass()">Remove Bordered and Padded Class</button>
</p>
<p>
<button type="button" onclick="toggleClass()">Toggle Hide Class</button>
</p>
<script>
// Выбор элемента
var elem = document.getElementById("content");
function addSingleClass(){
elem.classList.add("highlight"); // Добавляем класс highlight
}
function addMultipleClass(){
elem.classList.add("bordered", "padded"); // Добавляем классы bordered и padded
}
function removeSingleClass(){
elem.classList.remove("highlight"); // Удаляем класс highlight
}
function removeMultipleClass(){
elem.classList.remove("bordered", "padded"); // Удаляем классы bordered и padded
}
function toggleClass(){
elem.classList.toggle("hide"); // Переключаем класс hide
}
</script>
</body>
</html>В качестве альтернативы для поддержки старых браузеров вы можете использовать свойство className. В следующем примере показано, как добавлять или заменять классы CSS с помощью этого свойства.
<div id="info">Some important information!</div>
<script>
// Selecting element
var elem = document.getElementById("info");
elem.className = "note"; // Добавляем или заменяем все классы классом note
elem.className += " highlight"; // Добавляем новый класс highlight
elem.className += " bordered padded"; // Добавляем два новых класса bordered и padded
elem.className = ""; // Удаляем все классы
</script>Подробнее см. Руководство по стилям JavaScript DOM.
