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