JavaScript: modificare dinamicamente gli stili CSS di una pagina

JavaScript: modificare dinamicamente gli stili CSS di una pagina

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.

Torna su