A volte è necessario modificare dinamicamente gli stili CSS di una pagina. JavaScript è utile in questo caso.
Cominciamo con un tipico test con la seguente struttura di markup.
<p>This should be green</p>
<script><!-- JavaScript --></script>
Il primo approccio che possiamo provare è aggiungere un elemento style
subito prima dell'elemento. Possiamo svolgere questo task in questo modo:
const p = document.querySelector('p');
const style = document.createElement('style');
style.textContent = 'p { color: green; }';
document.body.insertBefore(style, p);
Il contenuto dell'elemento style
viene immediatamente analizzato come codice CSS e la regola di stile viene applicata perché viene prima dell'elemento di destinazione.
Questo approccio è utile quando bisogna solo modificare pochi stili e non si vuole usare più volte la proprietà style
sullo stesso elemento.
Ma quando bisogna applicare più regole di stile con un certo grado di complessità, un approccio migliore è inserire un nuovo foglio di stile direttamente nell'elemento head
, in questo modo:
const link = document.createElement('link');
link.href = 'style.css';
link.rel = 'stylesheet';
link.media = 'screen';
link.type = 'text/css';
document.head.appendChild(link);
Entrambi gli approcci sono validi, a condizione che il codice JavaScript venga eseguito subito dopo il caricamento della struttura del documento. È sempre una soluzione migliore inserire i nostri script appena prima del tag di chiusura body
per massimizzare e ottimizzare le prestazioni.