10547 sujets

JavaScript, DOM et API Web HTML5

Bonjour à tous,

désolé de vous déranger de nouveau pour ce sujet mais je ne comprends pas pourquoi j'arrive à ajouter une classe mais que, par la suite, le style de cette nouvelle classe n'est pas appliqué.

En fait, je clique sur la première image qui va ajouter une nouvelle classe (.extend). Cette classe est censée agrandir le champ texte de recherche mais ça ne fonctionne pas.

Par contre, lors du clique sur cette 1ère image, une 2ème image remplace la 1ère et, quand on clique sur cette 2ème image, il y a un message qui est affiché. Cette partie fonctionne.

Voici une copie de mon code :

https://codepen.io/thirt/pen/bGbpJRb

Merci à vous.

Bonne journée
Thierry
Administrateur
Bonjour,

il s'agit d'un problème de spécificité : si tu Inspectes ton input#search (F12), tu verras qu'après clic il y a bien la classe .extend ET que dans le panneau CSS, les 3 déclarations de cette règle sont présentes mais barrées et moins prioritaires que celles ayant pour sélecteur #search.
Comme les propriétés border, width et border-radius sont définies avec le poids / spécificité d'un id, c'est pas un sélecteur de classe qui va prendre le dessus… Ajoute un background: red par exemple et tu verras qu'il est bien appliqué car pas de background(-color) défini sur #search.

Tu peux pour pallier cela :
- ajouter des !important (moche Smiley orange ),
- remplacer le sélecteur par #search.select (le poids d'un id et d'une classe est supérieur à un id seul)
- ou - je te le conseille - ne pas utiliser d'id (edit : en CSS. Ça reste tout à fait recommandable en JS) (tu viens d'en avoir une démonstration : ça fiche le brin). Remplacer une classe par une autre ne pose pas de souci de CSS (en JS il faut faire attention si on veut remplacer / toggleClass 1 ou toutes les classes présentes ou ajouter une classe, par exemple pour ne pas virer .form-error). Si on l'ajoute, les 2 règles font effet et quand une propriété est définie dans les 2 avec la meme spécificité, c'est la dernière écrite qui s'applique (ici .extend viendrait après .search donc pas de souci).
Modifié par Felipe (16 Aug 2019 - 10:39)
Meilleure solution
Bonjour Felipe,

merci beaucoup pour vos explications, vos conseils et votre aide.

En effet, c'est nettement plus clair mais je n'y avait pas directement pensé comme vous. -:)

Encore merci beaucoup pour votre aide.

Passez une excellente journée.
Thierry