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

**Luzagale** · 10/02/2019, 21h25

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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").

**NoSmoking** · 11/02/2019, 10h20

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.

**Luzagale** · 11/02/2019, 10h51

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

<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.

**NoSmoking** · 11/02/2019, 10h59

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**Luzagale** · 11/02/2019, 11h01

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.

**NoSmoking** · 11/02/2019, 11h13

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 css :

Sélectionner tout - Visualiser dans une fenêtre à part

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à

**Luzagale** · 11/02/2019, 11h35

Ah, ben je crois que tu as trouvé la solution avec le css, tout simplement

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