KoffeeWeb

Quelques astuces et conseils pour réussir son site web!

Changer de feuille de style CSS avec du Javascript

Dans cet article nous allons voir comment jouer avec des feuilles de style différentes, en utilisant une liste et du Javascript, tout comme le sélecteur de style de ce site!
Pour cela, il faut des feuilles de styles CSS externes, un fichier javascript et un attribut ID pour la balise link!

Le programme en Javascript

Dans un fichier externe ici nommé chcss.js, le programme en Javascript pour changer l'attribut href de la balise link :


function chcss() {
	var css=document.getElementById ('selectcss').value;
	var link=document.getElementById('linkcss')
	link.setAttribute('href',css);
}

Dans l'entête HTML

Dans l'entête du fichier HTML, on donne un identifiant à la balise link contenant la feuille de style par défaut et on appelle le programme en javascript :


<head>
	...
	
	<!-- Lien avec identifiant vers le CSS -->
	<link id="linkcss"
	      rel="stylesheet"
	      type="text/css"
	      href="style1.css" />
	
	<!-- Appel du fichier javascript -->
	<script type="text/javascript" src="chcss.js">
	</script>
	
</head>

Dans le contenu HTML

Dans le contenu à l'endroit voulu, on créé une liste contenant comme options les feuilles CSS :


<select onchange="chcss()" id="selectcss">
	<option value="style1.css">Style1</option>
	<option value="style2.css">Style2</option>
	<option value="style3.css">Style3</option>
</select>

Et voilà !

Intervertir des boites avec du Javascript

Comme un petit dessin vaut mieux qu'un long discours cliquez ici pour voir un exemple de ce que cela peut donner!

N.B.: Cette page est optimisée pour firefox!



Des conseils sont en cours de rédaction! Revenez de temps en temps pour voir les mises à jour!