Stili e Classi in JavaScript

Introduzione

Esistono due modi per modificare l'aspetto di un elemento tramite JavaScript:

1. Aggiungere o rimuovere una classe CSS — lo stile risiede nel foglio di stile e JavaScript si limita ad attivare o disattivare la classe. Questo è l'approccio preferito.
2. Impostare uno stile inline direttamente sull'elemento tramite la proprietà style — utile quando il valore viene calcolato a runtime (ad esempio, una posizione che dipende dal mouse).

Questo capitolo tratta entrambi gli approcci: le API className e classList per lavorare con le classi, la proprietà style e cssText per gli stili inline, e getComputedStyle per leggere gli stili finali effettivamente applicati dal browser. Per un quadro più ampio di CSS e del DOM, consulta Lavorare con gli Stili nel DOM.

La proprietà style

Manipolazione Diretta degli Stili

La proprietà style è un object le cui chiavi sono le proprietà CSS inline dell'elemento. Per modificare direttamente lo stile di un elemento tramite JavaScript, si assegna un valore a una di quelle chiavi. Ecco un esempio di modifica del colore di sfondo e della dimensione del carattere di un paragrafo:

<!-- snippet: html-result -->

<style>
  #myParagraph {
    color: white; /* Ensures text is readable on a blue background */
  }
</style>
<div id="myParagraph">This is a paragraph.</div>
<script>
document.getElementById("myParagraph").style.backgroundColor = "blue";
document.getElementById("myParagraph").style.fontSize = "16px";
</script>

Attenzione ai nomi delle proprietà: CSS usa i trattini (background-color, font-size), ma l'object style usa il camelCase (backgroundColor, fontSize). Le proprietà composte da più parole seguono sempre questa regola, e le proprietà con prefisso mantengono il trattino iniziale come lettera maiuscola (-moz-border-radius diventa MozBorderRadius). I valori sono sempre string, e i valori CSS numerici devono includere la propria unità — el.style.fontSize = "16px", non 16.

Impostare el.style.backgroundColor scrive nell'attributo style="..." dell'elemento, quindi influisce solo su quell'elemento e sovrascrive le regole del foglio di stile (ha lo stesso peso di uno stile inline dell'autore). Per rimuovere un valore inline, si assegna una string vuota: el.style.fontSize = "".

Questo metodo offre un controllo diretto ma può diventare scomodo per modifiche multiple agli stili.

Utilizzo di style.cssText

Per applicare più modifiche di stile in modo efficiente, usa style.cssText:

<!-- snippet: html-result -->

<style>
  #myParagraph {
    padding: 5px;
    width: 200px;
    text-align: center;
  }
</style>
<div id="myParagraph">Another paragraph.</div>
<script>
document.getElementById("myParagraph").style.cssText = "background-color: blue; font-size: 16px; border: 1px solid black";
</script>

Questo approccio consolida le modifiche di stile in un'unica operazione. Tieni presente che cssText sostituisce l'intero stile inline, cancellando tutte le proprietà già impostate sull'elemento. Usalo quando vuoi ripartire da zero; usa le singole assegnazioni style.* quando vuoi modificare una proprietà lasciando le altre invariate.

Leggere gli stili con getComputedStyle

La proprietà style riflette solo gli stili inline — i valori impostati nell'attributo style o tramite JavaScript. Restituisce una string vuota per qualsiasi valore proveniente da un foglio di stile. Per leggere il valore finale e risolto che il browser ha effettivamente renderizzato (da ogni foglio di stile, regola inline e valore ereditato), usa getComputedStyle:

<!-- snippet: html-result -->

<style>
  #box { width: 10em; padding: 5px; }
</style>
<div id="box">Measure me</div>
<script>
const box = document.getElementById("box");
const styles = getComputedStyle(box);
// Computed values are resolved to absolute units (px), not the "10em" we wrote:
console.log(styles.width);   // "160px" (10em at the default 16px font size)
console.log(styles.padding); // "5px"
</script>

Alcune regole da ricordare:

• L'object restituito è di sola lettura — assegnargli valori non ha alcun effetto; usa element.style per modificare gli stili.
• I valori sono risolti: le lunghezze vengono restituite in pixel, i colori in formato rgb(...).
• Leggi sempre una proprietà specifica (getComputedStyle(el).marginTop) e preferisci il nome esteso — alcune proprietà abbreviate (margin, padding) vengono restituite in modo inconsistente tra i browser.

className vs classList

Esistono due modi per leggere e scrivere le classi di un elemento:

• element.className è una singola string che contiene l'intero attributo class. Assegnargli un valore sostituisce tutte le classi in una volta: el.className = "active warning". Comodo per impostare tutte le classi da zero, scomodo per modificarne solo una.
• element.classList è un object speciale con metodi per lavorare con le singole classi — add, remove, toggle, contains e replace. Questo è ciò a cui si ricorre più spesso, perché consente di modificare una classe senza disturbare le altre.

I metodi sono:

(La proprietà si chiama className, non class, perché class è una parola riservata in JavaScript — vedi Attributi e Proprietà.)

Aggiungere e Rimuovere Classi

Usare l'API classList semplifica la manipolazione delle classi.

Aggiungere una Classe

<!-- snippet: html-result -->

<style>
  .new-class {
    font-weight: bold;
    color: green;
  }
</style>
<div id="myDiv">Class manipulation</div>
<script>
document.getElementById("myDiv").classList.add("new-class");
</script>

Rimuovere una Classe

<!-- snippet: html-result -->

<style>
  .existing-class {
    text-decoration: underline;
    color: red;
  }
</style>
<div id="myDiv" class="existing-class">Another manipulation example</div>
<script>
document.getElementById("myDiv").classList.remove("existing-class");
</script>

Alternare una Classe

La funzionalità di toggle è efficace per cambiare stili come i temi:

<!-- snippet: html-result -->

<style>
  .dark-mode {
    background-color: black;
    color: white;
  }
</style>
<button id="toggleButton">Toggle Dark Mode</button>
<script>
document.getElementById("toggleButton").addEventListener("click", function() {
  document.body.classList.toggle("dark-mode");
});
</script>

Gestire Più Classi Contemporaneamente

Gestisci più classi in modo simultaneo:

<!-- snippet: html-result -->

<style>
  .first-class { background-color: yellow; }
  .second-class { border: 2px dashed blue; }
  .third-class { display: none; }
  .fourth-class { font-size: 14px; }
</style>
<div id="myDiv">Multiple class handling</div>
<script>
document.getElementById("myDiv").classList.add("first-class", "second-class");
document.getElementById("myDiv").classList.remove("third-class", "fourth-class");
</script>

Verificare e Sostituire Classi

Usa contains per determinare se una classe è presente, e replace per scambiare una classe con un'altra in una singola chiamata:

const el = document.getElementById("myDiv");

el.classList.contains("active"); // false

el.classList.add("active");
el.classList.contains("active"); // true

// Swap "active" for "disabled" (returns true if the swap happened):
el.classList.replace("active", "disabled"); // true
el.classList.contains("active");            // false
el.classList.contains("disabled");          // true

toggle accetta anche un secondo argomento opzionale che forza il risultato: classList.toggle("open", isOpen) aggiunge la classe quando isOpen è true e la rimuove quando è false, il che è comodo quando lo stato desiderato è già in un boolean.

Best Practice: Classi vs. Stili Inline

Preferisci le classi agli stili inline. Mantieni lo styling nel tuo CSS e lascia che JavaScript si limiti ad alternare il nome di una classe. Questo separa presentazione e comportamento, così i designer possono cambiare l'aspetto senza toccare gli script, la stessa classe può essere riutilizzata su molti elementi, e i tuoi stili rimangono in un unico posto facilmente ricercabile.

Ricorri a element.style solo quando un valore deve essere effettivamente calcolato a runtime — la posizione di un elemento che segue il mouse, una larghezza derivata dai dati, un colore scelto dall'input dell'utente. Questi valori non possono risiedere in un foglio di stile statico, quindi un valore inline è lo strumento giusto.

Quando un cambio di classe dovrebbe animarsi anziché cambiare di scatto, definisci una transition CSS sulla proprietà e lascia che l'alternanza della classe la guidi. Il browser gestisce l'animazione sul proprio percorso ottimizzato, che è più fluido rispetto all'aggiornamento dei valori tramite JavaScript. Vedi Animazioni CSS per i dettagli.

Conclusione

Usa classList (add, remove, toggle, contains, replace) per gestire le classi e lascia che il tuo foglio di stile faccia il lavoro visivo; ricorri a element.style solo per i valori che devono essere calcolati a runtime; e leggi i valori finali applicati con getComputedStyle — ricordando che è di sola lettura. Mantenere lo styling nel CSS e lasciare che JavaScript alterni le classi porta a codice più facile da manutenere e più veloce da renderizzare.

Pratica