Modifier dynamiquement le thème CSS d'une page JavaScript


Aperçu

Apercu du snippet

Description

Code

Avec cette fonction JavaScript, il est possible de modifier directement le style CSS de la page Web. Cela peut s'avérer utile afin de visualiser directement d'autres thèmes d'un site Internet. Dans l'exemple, nous verrons les styles utilisées sur le site GANIZR.


Le code peut être modifié librement afin d'utiliser ces propres thèmes CSS.
Un code HTML a été ajoutée afin de pouvoir tester la fonction JavaScript.


Statistiques

Ajouté par Nazario
le 11/06/2018 à 13h58
70
lignes de code
60
vues

Aucun vote pour le moment


Code JavaScript

function changeCSS(fichier) {
	// Si la fonction est appelée sans fichier, on supprime le fichier CSS
	if(!fichier) {
		document.getElementById("tlz_css").remove();
	}
	// Sinon, on continue
	if(fichier) {
		// On appelle la fonction sans fichier, afin de supprimer le fichier CSS pour ne pas écraser
		if(document.getElementById("tlz_css")) changeCSS();
		// On construit la balise link
		var lien_css = document.createElement('link');
		lien_css.href = 'https://www.ganizr.com/css/colors/'+fichier;
		lien_css.rel = "stylesheet";
		lien_css.type = "text/css";
		lien_css.id = "tlz_css";
		// On ajoute la balise link dans notre en-tête HTML
		document.getElementsByTagName("head")[0].appendChild(lien_css);
	}
}

Code HTML

<!DOCTYPE HTML>
<html lang="fr">
<head>
<title>Exemple de modification d'un fichier CSS</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" id="bootstrap-css">
</head>
<body>

<nav class="navbar navbar-inverse navbar-fixed-top">
	<div class="container-fluid">
		<div class="navbar-header">
			<a class="navbar-brand titre">Test</a>
		</div>
		<div id="navbar" class="navbar-collapse collapse">
			<ul class="nav navbar-nav navbar-right">
				<li><a onclick="changeCSS('cyan.css')" href="#">Cyan</a></li>
				<li><a onclick="changeCSS('rouge.css')" href="#">Rouge</a></li>
				<li><a onclick="changeCSS('vert.css')" href="#">Vert</a></li>
				<li><a onclick="changeCSS('violet.css')" href="#">Violet</a></li>
				<li><a onclick="changeCSS('noir.css')" href="#">Noir</a></li>
				<li><a onclick="changeCSS('blanc.css')" href="#">Blanc</a></li>
			</ul>
		</div>
	</div>
</nav>

<script>
function changeCSS(fichier) {
	// Si la fonction est appelée sans fichier, on supprime le fichier CSS
	if(!fichier) {
		document.getElementById("tlz_css").remove();
	}
	// Sinon, on continue
	if(fichier) {
		// On appelle la fonction sans fichier, afin de supprimer le fichier CSS pour ne pas écraser
		if(document.getElementById("tlz_css")) changeCSS();
		// On construit la balise link
		var lien_css = document.createElement('link');
		lien_css.href = 'https://www.ganizr.com/css/colors/'+fichier;
		lien_css.rel = "stylesheet";
		lien_css.type = "text/css";
		lien_css.id = "tlz_css";
		// On ajoute la balise link dans notre en-tête HTML
		document.getElementsByTagName("head")[0].appendChild(lien_css);
	}
}
</script>

</body>
</html>

0 commentaire

Aucun commentaire ajouté, soyez le premier à donner votre avis !