La proprietà className in Javascript

La proprietà className in Javascript mi permette di accedere e modificare le classi di un elemento HTML.

className

Si applica a un elemento del documento.

La proprietà restituisce la classe CSS corrente dell'elemento oppure la modifica.

Nota. La proprietà className gestisce tutte le classi come una singola stringa. Quindi, se un elemento ha più classi, restituisce una stringa con tutte le classi separate da spazi.

Faccio un esempio pratico.

Considero questa pagina web.

<html>
<body>
<p id="mioParagrafo" class="prova">Questo è un testo </p>
<script>
var paragrafo = document.getElementById("mioParagrafo");
document.write(paragrafo.className);
</script>
</body>
</html>

Lo script trova l'elemento con id=mioParagrafo tramite il metodo getElementById("mioParagrafo") e lo assegna all'oggetto paragrafo.

Poi legge e stampa la classe dell'elemento tramite la proprietà className.

In questo caso l'elemento è associato alla classe "prova"

prova

Esempio 2

Posso utilizzare la proprietà className anche per modificare la classe di un elemento.

<html>
<head>
<style>
.testoNormale { color: white; font-size: 16px; }
.testoEvidenziato { color: red; font-size: 20px; font-weight: bold; }
</style>
</head>
<body>
<p id="mioParagrafo" class="testoNormale">Questo è un testo che cambierà stile.</p>
<button id="cambiaStile">Cambia Stile del Testo</button>
<script>
document.getElementById("cambiaStile").addEventListener("click", function() {
var paragrafo = document.getElementById("mioParagrafo");
// Controllo se il paragrafo ha già la classe 'testoEvidenziato'
if (paragrafo.className === "testoNormale") {
paragrafo.className = "testoEvidenziato";
} else {
paragrafo.className = "testoNormale";
}
});
</script>
</body>
</html>

In questo esempio, quando l'utente clicca sul bottone, lo script controlla la classe attuale del paragrafo.

Se è testoNormale, la cambia in testoEvidenziato, e viceversa.

In questo modo, lo script cambia lo stile del testo a ogni click.

Questo è un testo che cambierà stile.