Como - Adicionar uma classe
Saiba como adicionar um nome de classe a um elemento com JavaScript.
Clique no botão para adicionar uma aula para mim!
Adicionar turma
Etapa 1) Adicionar HTML:
Adicione um nome de classe ao elemento div com id="myDIV" (neste exemplo usamos um botão para adicionar a classe).
Exemplo
<button onclick="myFunction()">Try it</button>
<div id="myDIV">
This is a DIV element.
</div>
Etapa 2) Adicionar CSS:
Estilize o nome da classe especificada:
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 adicione a classe "mystyle" a ele:
Exemplo
function myFunction() {
var element = document.getElementById("myDIV");
element.classList.add("mystyle");
}
Dica: consulte também Como alternar uma classe .
Dica: consulte também Como remover uma classe .
Dica: Saiba mais sobre a propriedade classList em nossa Referência JavaScript.
Dica: Saiba mais sobre a propriedade className em nossa Referência JavaScript.