Come si possono modificare dinamicamente gli stili di…

Puoi utilizzare i seguenti approcci:

Modificare la proprietà style dell'elemento: Il modo più semplice, modifica direttamente gli stili inline.

const element = document.getElementById('myElement');
element.style.color = 'red';
element.style.fontSize = '20px';

Aggiungere/rimuovere classi CSS: Approccio più flessibile, basato su stili predefiniti in CSS. Le modifiche agli stili avvengono applicando o rimuovendo classi.

const element = document.getElementById('myElement');
element.classList.add('active'); // aggiunge la classe 'active'
element.classList.remove('inactive'); // rimuove la classe 'inactive'
element.classList.toggle('visible'); // alterna la classe 'visible'

In CSS:

.active {
    background-color: yellow;
}
.inactive {
    display: none;
}
.visible {
    opacity: 1;
}

Modificare le variabili CSS (Proprietà personalizzate CSS): Permette di cambiare i valori delle variabili usate in CSS, influenzando gli stili di molti elementi contemporaneamente.

const root = document.documentElement;
root.style.setProperty('--main-color', 'blue');

In CSS:

:root {
    --main-color: #333;
}
.my-element {
    color: var(--main-color);
}

element.setAttribute('style', '...'): Meno raccomandato rispetto a element.style, poiché sovrascrive tutti gli stili inline.

const element = document.getElementById('myElement');
element.setAttribute('style', 'color: green; border: 1px solid black;');

Creare e inserire un elemento <style>: Permette di aggiungere dinamicamente nuove regole CSS alla pagina.

const style = document.createElement('style');
style.innerHTML = '#myElement { background-color: lightblue; }';
document.head.appendChild(style);

Modificare le fogli di stile (document.styleSheets): Interazione diretta con gli oggetti Style Sheet. È considerato più complesso e meno comune nello sviluppo quotidiano.

La scelta del metodo dipende dal compito: element.style è comodo per piccoli cambiamenti puntuali; le classi sono preferibili per gestire stati e stili complessi; le variabili CSS sono utili per temi e impostazioni globali.

Come si possono modificare dinamicamente gli stili di un elemento su una pagina web?