1. Accueil
  2. Tous les snippets
  3. Snippets Javascript
  4. Changer la classe css d'un élément avec javascript

Changer la classe css d'un élément avec javascript

4/5 (7 avis)

Snippet vu 23 432 fois - Téléchargée 21 fois

Commenter

Contenu du snippet

Changer une classe de feuille de style avec Javascript est en fait simple. Ici, l'exemple reprend un système d'onglets utilisés normallement avec ajax...

Source / Exemple : 


<html>
<head>
<script>
v_menuitemactu = 'null'; //Page d'acceuil (il n'y a pas d'onglet sélectionné)

	//Appel de la page...	
        //file ne sert ici à rien
        //menuclick est l'id de l'objet sur lequel on clique
	function LoadPage(file, menuclick){
		//...	

		//on remet l'ancienne classe pour l'ancien élément. Attention qu'il est possible qu'aucun ne soit utilisé, à ce moment, il faut faire une condition pour éviter d'interrompre la fonction
		if(v_menuitemactu != 'null') document.getElementById(v_menuitemactu).className  = "menuitem"; 
		//Mise à jour de l'onglet actuel
                v_menuitemactu = menuclick;
                //On change le style de l'onglet qui vient d'être sélectionné
		document.getElementById(v_menuitemactu).className  = "menuitemactu";
	}
</script>

<style type="text/css">
/* !! Attention, ici, seules les images changent !! */
/*Onglet non sélectionné...*/
td.menuitem{
	height: 35px;
	width: 200px;
	background-image: url("../images/menubutton_noselect.png");
	text-align: left;
	padding-left: 12px;
}
/* Onglet non-sélectionné survolé */
td.menuitem:hover{
	background-image: url("../images/menubutton_mouseon.png");
}
/* Onglet sélectionné */
td.menuitemactu{
	height: 35px;
	width: 200px;
	background-image: url("../images/menubutton_select.png");
	text-align: left;
	padding-left: 12px;
}
</style>
</head>
<body>
	<table width=200 cellpadding=0 cellspacing=0 border=0>
		<tr><td id="ml_01" class="menuitem" onclick="LoadPage('test.html', 'ml_01');"><a href="#" class="menulink">Mon Compte</a></td></tr>
		<tr><td id="ml_02" class="menuitem" onclick="LoadPage('test.html', 'ml_02');"><a href="#" class="menulink">Carte</td></tr>
		<tr><td id="ml_03" class="menuitem" onclick="LoadPage('test.html', 'ml_02');><a href="#" class="menulink">Mes Villes</td></tr>
		<tr><td id="ml_04" class="menuitem" onclick="LoadPage('test.html', 'ml_02');><a href="#" class="menulink">Explorateur</td></tr>		
	</table>
</body>

Conclusion :


Ayant une longue recherche sur Exalead, je n'ai pas trouvé de source faisant ce que fait celle-ci... Donc, voilà! Je pense que cela servira à beaucoup.

Je l'ai testé sous Firefox et cela marche parfaitement. À vous d'adapter selon vos besoins.
Je l'ai mis dans cette cathégorie, car elle est applicable à bien plus qu'un simple système d'onglet.

A voir également

Ajouter un commentaire Commentaires
cheveche4 Messages postés 5 Date d'inscription lundi 16 août 2004 Statut Membre Dernière intervention 18 mars 2008
17 mars 2008 à 18:46
Juste un petit commentaire: les liens utilisent un style que je n'ai pas définit dans la source.
Arto_8000 Messages postés 1044 Date d'inscription lundi 7 mars 2005 Statut Membre Dernière intervention 13 juillet 2010 7
17 mars 2008 à 21:10
C'est davantage un snippet qu'une source et honnêtement l'attribut className est loin d'être quelque chose de méconnu en Javascript. Cette source risque d'être supprimé par un administateur.
XtremDuke Messages postés 626 Date d'inscription samedi 28 septembre 2002 Statut Membre Dernière intervention 18 mai 2009 4
18 mars 2008 à 11:47
Même remarque que Arto_8000.

Tu aurais pu, par exemple, montrer comment implémenter plusieurs classes, en ajouter une, en supprimer une, vérifier l'existence d'une classe, etc...
cheveche4 Messages postés 5 Date d'inscription lundi 16 août 2004 Statut Membre Dernière intervention 18 mars 2008
18 mars 2008 à 18:30
Ben tant pis alors, je pensais que ce serait utile...
Frank_klein Messages postés 34 Date d'inscription samedi 26 mars 2005 Statut Membre Dernière intervention 8 février 2022
13 mai 2011 à 09:55
il faut arreter d'etre negatifs, cette source est utile, il faut pas attendre qu'on vous dit tout, c'est pas un service livre paye, il faut l'adapter a des travaux personnels, il y a des pistes de developement interesantes avec cette source.
merci a l'auteur
S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.