11548 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Remettre le style CSS par défaut après une action dessus

Salut,

Le sujet n'est pas clair mais je vais expliquer ça clairement :

J'ai une liste avec des <li> qui ont un style CSS que j'ai défini.
Quand on clique sur un item, j'affiche un div et je change le style de ce li pour montrer qu'il est sélectionné (tout ça en javascript).

J'ai donc dans ma feuille de style un truc du genre :

#menu li {
...
}

#menu li.selectionne {
...
}

Mon problème c'est que je ne sais pas comment faire pour "remettre par défaut" le style quand je change d'item.
Faudrait-il qu'obligatoirement j'ai deux styles définis genre li.selectionne et li.deselectionne et pas de style li par défaut ?

Merci !
Modifié par jeyce (02 Mar 2007 - 15:48)
Pourquoi ne pas définir une règle CSS
#menu li, #menu li.deselectionne { ... }

comme ça tu n'aurais plus qu'à faire une classique permutation de la propriété className.
Merci pour vos réponses, mais comment on fait en javascript pour "retirer la classe .selectionne à l'élément" ou "faire une classique permutation de la propriété className" ?
Modifié par jeyce (22 Feb 2007 - 15:49)
Cela ne va pas pour mon cas.

Voici le style :

#mainContentArea .utilityTabs li {
...
}

#mainContentArea .utilityTabs li.current {
...
}

Voici l'html :

<div id="mainContentArea">
<ul class="utilityTabs">
<li class="current">Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
</div>

Donc quand je clique sur un des li je veux qu'il passe en "current" (background différent) et que les autres soient en li normal, et ainsi de suite quand je clique sur un autre il passe en "current"...

Merci !
De ce que je connais de DOM je pense qu'il faut copier le noeud contenant tes trois <li> puis le parcourir pour retirer toute classe à ces éléments. Pour attribuer la classe au bon <li> il suffit de passer en argument à ta fonction "l'élément" en question via "this".

Bonne chance et dit-moi s'il y a quelque chose que tu n'as pas compris.
En fait j'ai réussi à utiliser les fonctions linkées par Julien Royer.
J'ai mis des id dans chaque li pour que ça marche.
Par contre dans une situation où on ne connait pas le nom de la classe à enlever, je ne sais pas comment on peut faire...
jeyce a écrit :
Par contre dans une situation où on ne connait pas le nom de la classe à enlever, je ne sais pas comment on peut faire...
Il suffit alors comme il t'a été suggéré de remplacer la valeur de la classe par une chaîne vide :
element.className = "";
Merci Julien, mais ce que je veux dire c'est s'il y avait un style appliqué, puis remplacé, et que je veux remettre en état initial (non à vide) ?
jeyce a écrit :
Merci Julien, mais ce que je veux dire c'est s'il y avait un style appliqué, puis remplacé, et que je veux remettre en état initial (non à vide) ?
Dans ce cas-là, je ne vois pas comment savoir quel était la classe initiale. Smiley smile
Bonjour,

jeyce a écrit :
s'il y avait un style appliqué, puis remplacé, et que je veux remettre en état initial (non à vide) ?


Dans ce cas, on joue simplement sur le fait qu'un élément peut avoir plusieurs classes cumulées, et que les règles de priorité CSS s'y appliquent normalement (le dernier arrivé a la priorité).

Il faut donc une classe générique annulant les effets de styles de toutes les classes potentiellement appliquées à l'élément, par simple surcharge. Puis le script ajoute / retire la classe générique à className (sans modifier la classe existante).
Sujet clos
Aller à