Como - Alternar classe
Alterne entre adicionar e remover um nome de classe de um elemento com JavaScript.
Clique no botão para alternar o nome da classe!
Alternar classe
Etapa 1) Adicionar HTML:
Alterne entre adicionar um nome de classe ao elemento div com id="myDIV" (neste exemplo, usamos um botão para alternar o nome da classe).
Exemplo
<button onclick="myFunction()">Try it</button>
<div id="myDIV">
This is a DIV element.
</div>
Etapa 2) Adicionar CSS:
Adicione um nome de classe para alternar:
Exemplo
.mystyle {
width: 100%;
padding:
25px;
background-color: coral;
color: white;
font-size: 25px;
}
Etapa 3) Adicione JavaScript:
Obtenha o elemento <div> com id="myDIV" e alterne entre a classe "mystyle":
Exemplo
function myFunction() {
var element = document.getElementById("myDIV");
element.classList.toggle("mystyle");
}
Dica: consulte também Como adicionar uma classe .
Dica: consulte também Como remover uma classe .
Dica: Saiba mais sobre a propriedade classList em nossa Referência JavaScript.