Lo Zibaldone Informatico - Cambia stile dinamicamente con JavaScript

Cambia stile dinamicamente con JavaScript

Questa pagina dimostra come cambiare dinamicamente il foglio di stile utilizzato dalla pagina web tramite JavaScript. Con un semplice clic su un elemento, puoi passare da un tema CSS all'altro, modificando l'aspetto della pagina in tempo reale. Il codice sfrutta l'attributo href del tag <link> per aggiornare il percorso del file CSS collegato, mostrando un approccio pratico e flessibile per la gestione dinamica degli stili.

Codice HTML

<!DOCTYPE html>
<html>
<head>
<link id="cssId" rel="stylesheet" href="css/css1.css">
<style>
body {line-height: 2em;}
.link {cursor: pointer;}
.link:hover {text-decoration: underline;}
</style>
<script>
function css(nr) {
	const filePath = `css/css${nr}.css`;
	/*template literal
	La sintassi utilizza i backtick (ALT+96 = `) invece delle classiche virgolette (' o ")
	e permette di incorporare espressioni JavaScript all'interno della stringa usando ${...}.*/
	document.getElementById("cssId").href = filePath;
}

window.addEventListener("DOMContentLoaded", () => {
	document.querySelectorAll('.link').forEach((el, index) => {
		el.addEventListener("click", () => css(index + 1));
	});
});
</script>
</head>
<body>
    <div class="link">Applica <i>css1</i> (default)</div>
    <div class="link">Applica <i>css2</i></div>
</body>
</html>

Codice CSS1

body{color:blue;}

Codice CSS2

body{color:red;}

Output