Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

  1. #1
    Membre à l'essai
    Femme Profil pro
    Développeur Web
    Inscrit en
    février 2019
    Messages
    16
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : février 2019
    Messages : 16
    Points : 13
    Points
    13

    Par défaut 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 : 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").

  2. #2
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    13 295
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 13 295
    Points : 32 109
    Points
    32 109

    Par défaut

    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.

  3. #3
    Membre à l'essai
    Femme Profil pro
    Développeur Web
    Inscrit en
    février 2019
    Messages
    16
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : février 2019
    Messages : 16
    Points : 13
    Points
    13

    Par défaut

    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.

  4. #4
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    13 295
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 13 295
    Points : 32 109
    Points
    32 109

    Par défaut

    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.

  5. #5
    Membre à l'essai
    Femme Profil pro
    Développeur Web
    Inscrit en
    février 2019
    Messages
    16
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : février 2019
    Messages : 16
    Points : 13
    Points
    13

    Par défaut

    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.

  6. #6
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    13 295
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 13 295
    Points : 32 109
    Points
    32 109

    Par défaut

    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à

  7. #7
    Membre à l'essai
    Femme Profil pro
    Développeur Web
    Inscrit en
    février 2019
    Messages
    16
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : février 2019
    Messages : 16
    Points : 13
    Points
    13

    Par défaut

    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

  8. #8
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    13 295
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 13 295
    Points : 32 109
    Points
    32 109

  9. #9
    Membre à l'essai
    Femme Profil pro
    Développeur Web
    Inscrit en
    février 2019
    Messages
    16
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : février 2019
    Messages : 16
    Points : 13
    Points
    13

    Par défaut

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

  10. #10
    Membre chevronné
    Homme Profil pro
    Inscrit en
    octobre 2011
    Messages
    1 652
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : octobre 2011
    Messages : 1 652
    Points : 2 009
    Points
    2 009

    Par défaut

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

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. modifier feuille de style css via Javascript
    Par Haoru dans le forum Général JavaScript
    Réponses: 14
    Dernier message: 23/02/2011, 03h27
  2. Modifier le style d'une page via un formulaire
    Par Sofalkin dans le forum Débuter
    Réponses: 3
    Dernier message: 09/05/2008, 20h25
  3. [1.1] modifier un asp:label via javascript
    Par jbrasselet dans le forum ASP.NET
    Réponses: 2
    Dernier message: 08/11/2007, 11h49
  4. Modifier des styles en javascript
    Par vraipolite dans le forum Général JavaScript
    Réponses: 19
    Dernier message: 02/04/2006, 18h20
  5. Modifier le style d'un display en javascript
    Par Benjiijneb dans le forum Général JavaScript
    Réponses: 8
    Dernier message: 06/02/2006, 11h24

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo