Come fare per - Attiva/disattiva classe
Alterna tra l'aggiunta e la rimozione di un nome di classe da un elemento con JavaScript.
Fare clic sul pulsante per cambiare il nome della classe!
Attiva/Disattiva classe
Passaggio 1) Aggiungi HTML:
Alterna tra l'aggiunta di un nome di classe all'elemento div con id="myDIV" (in questo esempio usiamo un pulsante per alternare il nome di classe).
Esempio
<button onclick="myFunction()">Try it</button>
<div id="myDIV">
This is a DIV element.
</div>
Passaggio 2) Aggiungi CSS:
Aggiungi un nome di classe per attivare:
Esempio
.mystyle {
width: 100%;
padding:
25px;
background-color: coral;
color: white;
font-size: 25px;
}
Passaggio 3) Aggiungi JavaScript:
Ottieni l'elemento <div> con id="myDIV" e alterna tra la classe "mystyle":
Esempio
function myFunction() {
var element = document.getElementById("myDIV");
element.classList.toggle("mystyle");
}
Suggerimento: vedi anche Come aggiungere una classe .
Suggerimento: vedi anche Come rimuovere una classe .
Suggerimento: scopri di più sulla proprietà classList nel nostro JavaScript Reference.