Come cambiare la classe

Usa JavaScript per aggiungere e rimuovere classi tra gli elementi.

Clicca sul pulsante per cambiare il nome della classe!

Cambio di classe

Passo 1 - Aggiungi HTML:

Aggiungi la classe a id="myDIV" tra gli elementi div (in questo esempio, usiamo un pulsante per cambiare il nome della classe).

<button onclick="myFunction()">Prova</button>
<div id="myDIV">
  Questo è un elemento DIV.
</div>

Passo 2 - Aggiungi CSS:

Aggiungi un nome di classe per il cambio:

.mystyle {
  width: 100%;
  padding: 25px;
  background-color: coral;
  color: white;
  font-size: 25px;
}

Passo 3 - Aggiungi JavaScript:

ottieni id="myDIV" l'elemento <div> e in "mystyle" Cambiamento tra classi:

function myFunction() {
  var element = document.getElementById("myDIV");
  element.classList.toggle("mystyle");
}

Prova personalmente

Pagine correlate

Guida:Come aggiungere una classe

Guida:Come rimuovere una classe

Manuale di riferimento:Proprietà classList dell'Elemento DOM HTML