Comment changer la couleur d’un texte d’un simple clic ?

Voici un petit script utilisant jQuery pour changer les css d’un texte.
Ici nous changerons l’attribut ‘color’ d’un texte

css jquery

1- le code javascript à insérer :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
function change_couleur(class1,couleur1) { $(class1).css('color',couleur1); }
</script>

La première ligne charge jQuery à partir de google.

La seconde définit la fonction qui sera appelé lors d’un clic sur un lien pour changer les attributs CSS d’un élément de la page.

2. le code HTML qui sera utiliser :

<span class="couleur">mon texte coloré </span>

<a href="javascript:change_couleur('.couleur','#0000ff');">Changer en bleu</a> 

La première ligne correspond au texte dont on souhaite modifier un attribut CSS, ici la couleur (attribut color)

La seconde ligne correspond à un lien qui appelle la fonction change_couleur en lui passant la classe du texte à changer, ici c’est la classe « .couleur ». N’oubliez pas le point devant, ce n’est pas une erreur. Le second paramètre de la fonction est la couleur que l’on souhaite attribuer à notre élément HTML. La dièse (#) devant les lettres et les chiffres indique qu’il s’agit d’une couleur exprimée en hexadécimal. Vous pouvez en apprendre davantage sur le codage des couleurs dans l’article sur le codage des couleurs des images en informatique

Voici ce que cela donne : 

L’intérêt de ce petit code est de pouvoir modifier les attribut CSS d’un site en un seul clique, ce qui apporte un peu de réactivité à la page.

Vous pouvez aller plus loin, en regardant l’article changer un texte avec jQuery ou faire des requêtes Ajax jQuery, qui sont de bons compléments à cette petite introduction.

Si cet article vous a intéressé, n’hésitez pas à le partager.

Les recherches qui vous ont mené ici

  • cganger un text au clic css (1)
  • changer la couleur clic css (1)
  • changer un texte par un autre javascript au clic (1)
Ces articles pourraient vous intéresser :
2 Comments

Add a Comment

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Lire plus :
poireau
Leek Wars : programmez l’intelligence de vos poireaux pour gagner la bataille !

Quels sont les points communs entre un poireau, l'intelligence artificielle et une bataille sanglante ? Pas d'idée? Eh bien, c'est Leek...

enjoy-css
Les 7 meilleurs générateurs css3 en ligne

Depuis CSS3, les feuilles de style ont révolutionné la création des sites web : des coins arrondis, des gradients, des transitions,...

word docx
3 convertisseurs de fichiers Word docx en doc en ligne.

Depuis les dernières versions de Word 2007 puis Word 2010, le format d'enregistrement des documents Word a changé. Bien qu'elle...

Fermer