Modifier le style d'un mot via Javascript (résolu en css)

Bonjour,

Je cherche comment modifier directement le style de chaque occurence d'un mot sur un site. Ici, c'est un site Wordpress qui utilise une extension "annuaire" et met les tags des différentes catégories en-dessous de chaque entrée listée. Seulement, il n'est pas possible de personnaliser ces tags sans qu'ils aient tous le même style (alors que je cherche justement à ce qu'ils soient facilement différenciables grâce à leur couleur).

Pour l'instant, j'avais fait ça comme code, mais ça ne fonctionne pas :

Code:

---

1 2	const mot= document.getElementsByName("mot"); mot[].style.color="orange";

---

J'ai vu que j'aurais aussi pu écrire directement ça, mais c'est pareil, ça ne change rien :

Code:

---

document.getElementsByName("mot").style.color="orange";

---

Pourriez-vous m'aider ? :)

Sachant que si j'ai la réponse à ça, je devrais pouvoir faire plus compliqué ensuite : cacher les catégories selon les pages du site (par exemple, ne pas mélanger les professionnels de l'onglet "santé" avec les professionnels de l'onglet "bâtiment").

Bonjour et bienvenue sur DVP.

Il serait intéressant que tu nous indiques comment sont « tagués » ces mots, sont-ils mis dans un balisage HTML ... ?

La méthode getElementsByName retourne une collection d'éléments il te faut donc boucler sur celle-ci pour cibler chaque élément, mais cette méthode n'est peut être pas la bonne, cela va dépendre de ta réponse à la première question.

Bonjour et merci.

Après avoir cherché, j'ai compris que le "name" ne cherchait pas le mot tel quel dans la page mais renvoyait vers la balise "name =". Du coup ce n'est pas du tout ce qu'il me faut.

Voilà comment le code est fait, sachant que c'est à partir d'une catégorie et qu'il faut que les futurs "Naturopathe" s'affichent avec le même style. On ne peut donc pas rajouter de div ou de id étant donné que c'est le plugin qui construit les catégories ainsi.

Code:

---

<a href="http://monsite.org/listing-category/naturopathe/">Naturopathe</a>

---

Je suis allée voir du côté des RegEx mais j'ai du mal à gérer ça.

Donc ce que tu cherches à faire est modifier le style de tes liens.

Code:

---

var oElements = document.links;

---

oElements contiendra tous les liens, <a>, de ta page il ne te reste plus qu'à les parcourir et faire selon ton besoin en ajoutant une classe par exemple pour plus de souplesse.

Pas exactement puisque je ne veux pas que tous les liens aient la même allure. La catégorie "Naturopathe" ne doit pas avoir le même style que la catégorie "Médecin", et comme c'est un rendu automatique, impossible d'ajouter des classes différentes aux catégories.

Je n'ai pas tout bien compris, tu as plusieurs liens avec la même HREF dans ce cas il existe également la solution de cibler cela en CSS avec un sélecteur de classe

Code:

---

1 2 3 4 5 6

a[href*="naturopathe"] { color: red; } a[href*="medecin"] { color: blue; }

---

Si tu as des soucis avec les regExp, pose ta question CosmoKnacki passera bien par là :mrgreen:

Ah, ben je crois que tu as trouvé la solution avec le css, tout simplement :mrgreen: Des heures à chercher comment faire avec javascript quand du simple css suffisait. Je ne savais pas qu'on pouvait cibler avec a[href="lien"]. Même en regardant sur des liens comme https://www.w3schools.com/css/css_link.asp , ce n'est pas montré comme une possibilité pour viser un ou plusieurs liens spéciaux.

En tout cas merci. Du coup je crois que mon site va être plus simple à finir maintenant :D

Pour les liens il y a mieux que w3schools il existe :

• Les sélecteurs en CSS3
• Savoir comment utiliser les sélecteurs CSS 2.1 et les nouveautés CSS 3
• Sélecteurs d'attribut

et bien évidement

• Selectors Level 3

Merci, c'est bien plus complet en effet. Je garde ça dans mes favoris :)

Moi aussi je mets ça dans mes favoris.
Merci.