Modificare la proprietà CSS utilizzando JavaScript

Per modificare una proprietà CSS con JavaScript, seleziona l’elemento interessato e imposta una proprietà del suo oggetto style. Se devi applicare un gruppo di stili correlati, aggiungi invece una classe CSS. Per un solo elemento usa un ID o un selettore CSS; per aggiornare tutti gli elementi corrispondenti, usa una raccolta basata su una classe. Nel browser è disponibile l’oggetto document; jQuery è facoltativo.

Modificare una proprietà CSS con element.style

Usa element.style quando devi impostare un singolo stile inline. In JavaScript, i nomi delle proprietà CSS con trattini si scrivono in camelCase: border-color diventa borderColor. Questo piccolo esempio autonomo permette di provare la selezione e l’assegnazione in un ambiente JavaScript; in una pagina, document è l’oggetto che rappresenta il documento effettivo del browser.

Esegui questo esempio:

Il codice e le etichette o gli output visibili in questa sezione restano in inglese.

const input = { style: {} };
const document = {
  getElementById(id) {
    return id === "email" ? input : null;
  }
};

const element = document.getElementById("email");
if (element) {
  element.style.borderColor = "red";
}

L’assegnazione a style modifica lo stile inline dell’elemento. Non cambia una regola del foglio di stile e non rimuove gli altri stili. Nel codice eseguito nel browser, la selezione corrispondente è document.getElementById("email"); controlla il valore restituito prima di leggerne o modificarne le proprietà.

Applicare più stili con una classe CSS

Una classe è più semplice da gestire quando uno stato richiede diverse dichiarazioni coordinate. Definisci una classe nel foglio di stile, quindi usa classList.add() per applicarla e classList.remove() per rimuoverla. Per esempio, una classe per segnalare un errore in un campo di input può impostare sia il bordo sia il testo in rosso. classList conserva le altre classi dell’elemento.

Anche assegnare element.className = "input-error" modifica l’attributo delle classi, ma sostituisce l’intera stringa. Le classi già presenti, per esempio quelle di layout o di validazione, vanno perse se non le includi nella nuova stringa. Usa classList per aggiungere o rimuovere singole classi; usa className quando vuoi sostituirle tutte intenzionalmente.

Selezionare elementi per classe con getElementsByClassName

document.getElementsByClassName("input-blue-border") restituisce una HTMLCollection dinamica degli elementi corrispondenti, non un array. La raccolta si aggiorna quando gli elementi corrispondenti vengono aggiunti al documento o rimossi da esso. Per modificare tutti gli elementi corrispondenti al momento della selezione, scorri la raccolta con un ciclo for...of e aggiorna lo stile o l’elenco delle classi di ciascun elemento. Se ti servono i metodi degli array, converti prima la raccolta con Array.from(...).

Puoi chiamare il metodo anche su un elemento per trovare gli elementi discendenti corrispondenti al suo interno. L’argomento è un nome di classe senza il punto iniziale; usa .input-blue-border solo con un’API che accetta selettori CSS, come querySelector().

Selezionare un elemento con getElementById o querySelector

document.getElementById("email") cerca un elemento tramite il suo ID e restituisce l’elemento corrispondente oppure null. Gli ID dovrebbero essere univoci nel documento; gli ID duplicati non sono validi nel markup, quindi non fare affidamento su quale elemento venga restituito.

document.querySelector(".input-blue-border") accetta un selettore CSS e restituisce il primo elemento corrispondente, oppure null se non ne trova nessuno. Può selezionare per ID (#email), classe (.input-blue-border) o tag (input). Anche se il selettore potrebbe corrispondere a più elementi, querySelector() restituisce solo il primo. Verifica che il valore non sia null prima di modificarne lo stile o le classi.

Scegliere un selettore e gestire corrispondenze mancanti o multiple

Scegli il selettore in base all’elemento da raggiungere e al numero di elementi da aggiornare: usa getElementById per un singolo elemento con un ID univoco, oppure querySelector() quando è più pratico usare un selettore CSS e ti serve solo la prima corrispondenza. Usa getElementsByClassName quando devi modificare tutti gli elementi con una determinata classe. Per una singola dichiarazione di stile, imposta element.style; per uno stato identificato da più dichiarazioni, attiva o disattiva una classe.

La selezione può non trovare l’elemento se questo non è ancora nel documento, se l’ID o la classe contiene un errore di battitura oppure se il markup non è stato caricato. Esegui la selezione quando il markup interessato è disponibile oppure controlla il valore restituito prima di accedere a style o classList. Per esempio, nel browser puoi scrivere const element = document.querySelector(".notice"); if (element) element.classList.add("is-visible");. Per aggiornare un solo elemento di una raccolta basata su classi, scegli esplicitamente quale; per aggiornarli tutti, scorri la raccolta.

Riepilogo

Seleziona prima l’elemento desiderato. Imposta una singola dichiarazione inline con element.style oppure usa classList per applicare un gruppo di stili conservando le classi già presenti. getElementById individua un elemento tramite ID, querySelector() restituisce la prima corrispondenza di un selettore CSS e getElementsByClassName fornisce una raccolta dinamica per aggiornare tutti gli elementi con quella classe. Controlla il risultato delle selezioni di un singolo elemento prima di usarlo e scorri la raccolta quando devi intervenire su più elementi.