Lavorare con gli Stili nel DOM

Quando si lavora con il Document Object Model (DOM) in JavaScript, modificare l'aspetto di un elemento a runtime è una delle operazioni più frequenti. Questa guida illustra i metodi pratici per applicare stili agli elementi DOM: scrivere stili inline, leggere e impostare singole proprietà CSS tramite la proprietà style, sostituire più proprietà contemporaneamente con cssText, leggere gli stili calcolati con getComputedStyle() e — l'approccio consigliato nella maggior parte dei casi — attivare e disattivare classi CSS con la classList API.

In breve: preferisci le classi agli stili inline. La manipolazione diretta degli stili va bene per valori calcolati a runtime (una posizione, un colore scelto dinamicamente), ma per tutto ciò che rappresenta uno stato — "attivo", "completato", "errore" — definisci una classe in CSS e attivala con JavaScript. Questa guida mostra entrambi gli approcci e spiega quando ciascuno è lo strumento giusto. Per una panoramica più ampia sullo stile degli elementi, consulta Styles and Classes.

Stili Inline

Gli stili inline applicano CSS direttamente a un elemento HTML tramite l'attributo style. Sono utili per modifiche rapide e occasionali, ma non scalano: mescolano la presentazione al markup, non possono essere riutilizzati e vincono ogni battaglia di specificità tranne !important, il che li rende difficili da sovrascrivere in seguito.

Esempio

<div id="inlineStyleExample">This text will be styled using inline styles.</div>
<button onclick="applyInlineStyle()">Apply Inline Style</button>

<script>
  function applyInlineStyle() {
    const element = document.getElementById('inlineStyleExample');
    element.style.color = 'red';
    element.style.fontSize = '20px';
  }
</script>

In questo esempio, facendo clic sul pulsante vengono applicati stili inline all'elemento div, cambiando il colore del testo in rosso e la dimensione del carattere a 20 pixel.

Impostare gli Stili con la Proprietà style

La proprietà style fornisce un oggetto CSSStyleDeclaration che corrisponde allo stile inline dell'elemento. Leggerla e scriverla equivale in JavaScript a modificare l'attributo style — quindi condivide gli stessi compromessi degli stili inline, ma permette di calcolare i valori dinamicamente.

Due regole tratti in inganno:

• I nomi delle proprietà CSS diventano camelCase. Le proprietà con trattino come font-size e background-color diventano style.fontSize e style.backgroundColor. L'unica eccezione è float, che diventa style.cssFloat perché float è una parola riservata.
• I valori sono string, con unità di misura. element.style.width = 200 non fa nulla; bisogna scrivere element.style.width = '200px'. Allo stesso modo, leggere element.style.color dopo averlo impostato restituisce una string come 'rgb(0, 0, 255)'.

Esempio

<div id="stylePropertyExample">This text will be styled using JavaScript.</div>
<button onclick="applyStyleProperty()">Apply Style Property</button>

<script>
  function applyStyleProperty() {
    const element = document.getElementById('stylePropertyExample');
    element.style.color = 'blue';
    element.style.fontSize = '18px';
    element.style.margin = '10px';
  }
</script>

In questo esempio, facendo clic sul pulsante vengono applicati diversi stili all'elemento div tramite la proprietà style. Il colore del testo viene impostato su blu, la dimensione del carattere a 18 pixel e viene aggiunto un margine di 10 pixel.

Impostare più proprietà contemporaneamente con cssText

Assegnare una proprietà alla volta provoca una scrittura separata ogni volta. Quando si devono impostare più proprietà insieme, style.cssText consente di assegnarle in una singola istruzione usando la normale sintassi CSS:

element.style.cssText = 'color: white; background-color: navy; padding: 8px;';

Tieni presente che assegnare cssText sostituisce tutti gli stili inline esistenti, quindi usalo per impostare un blocco completo anziché per modificare un singolo valore. Per rimuovere una singola proprietà, impostala su una string vuota (element.style.color = '') oppure chiama element.style.removeProperty('color').

Leggere lo stile effettivo con getComputedStyle()

La proprietà style riflette solo gli stili inline. Se un colore proviene da un foglio di stile o da una classe, element.style.color è una string vuota. Per leggere il valore effettivamente applicato dal browser — dopo che i fogli di stile, le classi e l'ereditarietà sono stati risolti — usa window.getComputedStyle():

<p id="styledByCss">I am styled by a stylesheet.</p>
<button onclick="readStyle()">Read computed color</button>

<script>
  function readStyle() {
    const element = document.getElementById('styledByCss');
    // element.style.color would be '' — the color comes from CSS, not inline.
    const computed = window.getComputedStyle(element);
    alert('Computed color: ' + computed.color);
  }
</script>

<style>
  #styledByCss {
    color: green;
  }
</style>

I valori calcolati vengono restituiti in forma normalizzata e di sola lettura — i colori come rgb(...), le lunghezze in px — quindi getComputedStyle(element).color restituisce 'rgb(0, 128, 0)' anziché 'green'.

Manipolazione delle Classi

Gestire le classi è il modo consigliato per applicare stili agli elementi: lo stile risiede nel CSS, e JavaScript si limita ad attivare e disattivare le classi. La proprietà classList espone una piccola API ben nominata — add(), remove(), toggle(), contains(), replace() e item() — più chiara e sicura rispetto alla costruzione di string con className.

Perché preferire classList a className? Scrivere element.className = 'highlight' sovrascrive tutte le classi esistenti, rischiando di eliminare classi su cui fa affidamento un'altra parte del codice. classList.add('highlight') aggiunge solo quella classe e lascia le altre intatte.

Aggiungere Classi

Il metodo add() aggiunge una o più classi a un elemento. Aggiungere una classe già presente non ha effetto, quindi è sicuro chiamarlo ripetutamente.

Esempio

<div id="addClassExample">This element will have classes added.</div>
<button onclick="addClass()">Add Class</button>

<script>
  function addClass() {
    const element = document.getElementById('addClassExample');
    element.classList.add('highlight', 'text-large');
  }
</script>

<style>
  .highlight {
    background-color: yellow;
  }

  .text-large {
    font-size: 24px;
  }
</style>

In questo esempio, facendo clic sul pulsante vengono aggiunte le classi highlight e text-large all'elemento div, applicando i relativi stili.

Rimuovere Classi

Il metodo remove() rimuove una o più classi da un elemento. Rimuovere una classe non presente è un'operazione senza effetto, quindi non è necessario controllare prima.

Esempio

<div id="removeClassExample" class="highlight text-large">
  This element will have classes removed.
</div>
<button onclick="removeClass()">Remove Class</button>

<script>
  function removeClass() {
    const element = document.getElementById('removeClassExample');
    element.classList.remove('highlight', 'text-large');
  }
</script>

<style>
  .highlight {
    background-color: yellow;
  }

  .text-large {
    font-size: 24px;
  }
</style>

Qui, facendo clic sul pulsante vengono rimosse le classi highlight e text-large dall'elemento div.

Attivare/Disattivare Classi

Il metodo toggle() aggiunge una classe se non è presente e la rimuove se lo è — perfetto per stati on/off come un menu aperto o un'attività completata. Restituisce true se la classe è presente al termine e false altrimenti.

È anche possibile forzare il risultato con un secondo argomento boolean: toggle('active', true) aggiunge sempre la classe, e toggle('active', false) la rimuove sempre. Questo è utile quando lo stato desiderato proviene da una variabile: element.classList.toggle('active', isActive).

Esempio

<div id="toggleClassExample">Click me to toggle the highlight class.</div>
<button onclick="toggleClass()">Toggle Class</button>

<script>
  function toggleClass() {
    const element = document.getElementById('toggleClassExample');
    element.classList.toggle('highlight');
  }
</script>

<style>
  .highlight {
    background-color: yellow;
  }

  .text-large {
    font-size: 24px;
  }
</style>

In questo esempio, facendo clic sul pulsante si attiva e disattiva la classe highlight sull'elemento div.

Verificare la Presenza di Classi

Il metodo contains() restituisce true se un elemento ha una classe specifica e false altrimenti. Usalo per ramificare in base allo stato corrente, ad esempio per aggiornare l'etichetta di un pulsante.

Esempio

<div id="containsClassExample" class="highlight">
  This element's classes will be checked.
</div>
<button onclick="checkClass()">Check Class</button>

<script>
  function checkClass() {
    const element = document.getElementById('containsClassExample');
    if (element.classList.contains('highlight')) {
      alert('The element has the highlight class.');
    } else {
      alert('The element does not have the highlight class.');
    }
  }
</script>

<style>
  .highlight {
    background-color: yellow;
  }

  .text-large {
    font-size: 24px;
  }
</style>

Qui, facendo clic sul pulsante viene verificato se l'elemento containsClassExample ha la classe highlight e viene mostrato un avviso di conseguenza.

Sostituire una Classe

Il metodo replace() scambia una classe con un'altra in una singola chiamata e restituisce true se la classe precedente esisteva ed è stata sostituita. È più pulito rispetto a chiamare remove() e poi add():

<div id="replaceClassExample" class="theme-light">Switch my theme.</div>
<button onclick="swapTheme()">Toggle theme</button>

<script>
  function swapTheme() {
    const element = document.getElementById('replaceClassExample');
    if (!element.classList.replace('theme-light', 'theme-dark')) {
      // It wasn't 'theme-light', so swap the other way.
      element.classList.replace('theme-dark', 'theme-light');
    }
  }
</script>

<style>
  .theme-light { background: #fff; color: #111; padding: 8px; }
  .theme-dark { background: #111; color: #fff; padding: 8px; }
</style>

classList è anche iterabile, e classList.item(index) restituisce la classe a una data posizione (o null se l'indice è fuori intervallo), il che può essere utile quando si devono leggere le classi una per una.

Esempio Pratico: Lista To-Do Interattiva

Per dimostrare questi concetti in uno scenario reale, costruiamo una piccola lista to-do interattiva. I nuovi compiti vengono aggiunti all'elenco, e facendo clic su un compito viene attivata/disattivata una classe completed che lo barra — un caso classico per classList.toggle().

<div>
  <h2>To-Do List</h2>
  <p>Here, you can add new items, and mark it as completed by clicking on them.</p>
  <input type="text" id="newTask" placeholder="Add a new task" />
  <button id="addTaskButton">Add Task</button>
  <ul id="taskList"></ul>
</div>

<script>
  const newTaskInput = document.getElementById('newTask');
  const addTaskButton = document.getElementById('addTaskButton');
  const taskList = document.getElementById('taskList');

  addTaskButton.addEventListener('click', () => {
    const taskText = newTaskInput.value;
    if (taskText) {
      const taskItem = document.createElement('li');
      taskItem.textContent = taskText;
      taskItem.classList.add('task');

      taskItem.addEventListener('click', () => {
        taskItem.classList.toggle('completed');
      });

      taskList.appendChild(taskItem);
      newTaskInput.value = '';
    }
  });
</script>

<style>
  .task {
    cursor: pointer;
    padding: 5px;
    border-bottom: 1px solid #ccc;
  }

  .task.completed {
    text-decoration: line-through;
    color: gray;
  }
</style>

In questo esempio, creiamo un'applicazione to-do list in cui i compiti possono essere aggiunti e contrassegnati come completati facendo clic su di essi. La classe task applica lo stile ai compiti, mentre la classe completed, applicata tramite il metodo toggle(), indica i compiti terminati.

Buone Pratiche

Per garantire codice efficiente e manutenibile quando si lavora con gli stili nel DOM, tieni in considerazione le seguenti buone pratiche:

1. Separazione delle responsabilità: Mantieni separati HTML, CSS e JavaScript. Usa JavaScript per manipolare le classi anziché impostare gli stili direttamente, ogni volta che è possibile. Questo approccio garantisce la separazione delle responsabilità e rende il codice più facile da gestire.
2. Evita gli stili inline: Usa gli stili inline con parsimonia. Gli stili inline possono rendere l'HTML disordinato e difficile da mantenere. Preferisci invece aggiungere e rimuovere classi definite nel CSS.
3. Usa le classi per la riutilizzabilità: Definisci classi riutilizzabili nel CSS e usa JavaScript per attivarle e disattivarle. Questo approccio consente uno stile più coerente nell'applicazione e semplifica l'aggiornamento degli stili.
4. Sfrutta i metodi di classList: Usa i metodi di classList (add, remove, toggle, contains) per gestire le classi in modo efficiente. Questi metodi sono semplici e hanno buone prestazioni rispetto alla manipolazione diretta della proprietà className.
5. Considerazioni sulle prestazioni: Presta attenzione alle prestazioni quando manipoli il DOM. Attivare una singola classe provoca un unico ricalcolo degli stili, mentre impostare molte proprietà una alla volta su element.style può causare ricalcoli ripetuti. Per una guida più approfondita, consulta DOM Performance Optimization.

Conclusione

Manipolare gli stili nel DOM è essenziale per interfacce dinamiche e interattive. Usa la proprietà style (e cssText) per valori calcolati a runtime, getComputedStyle() per leggere gli stili effettivamente applicati dal browser, e la classList API — add, remove, toggle, contains, replace — per tutto ciò che rappresenta uno stato riutilizzabile. Come regola generale, punta prima alle classi e usa gli stili inline solo quando è strettamente necessario.

Per continuare a esplorare il DOM, consulta DOM Manipulation, Selecting DOM Elements e Attributes and Properties.

Esercizi