В современных браузерах вы можете использовать свойство 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.

Читайте также

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.