 [Résolu] Javascript - Changer couleur d'un texte |
 |
Bienvenue invité ( Connexion | Inscription )
  |
 23 Feb 2012, 12:17
Message
#1
|
|
|
Adepte de Macbidouille  Groupe : Membres Messages : 242 Inscrit : 2 Feb 2009 Membre no 130 546  |
Bonjour à tous,
je suis totalement débutant, alors soyez indulgent  J'essais de faire un script qui quand on clique sur un texte noir, change sa couleur en rose, puis si on reclique dessus, repasse en noir. Je suis là : function doSomething(obj) { if (obj.style.color = 'black'){ obj.style.color = 'pink' } else { obj.style.color = 'black' } } et le html : <span onclick="doSomething(this);">blablabla</span> Ça fonctionne plus ou moins : quand je clique la couleur passe au rose, par contre si je reclique, rien ne se passe. C'est le texte n'est pas noir, la couleur change quand même… Une idée s'il vous plait ? Ce message a été modifié par Carlitospsd - 23 Feb 2012, 16:30. |
 |
 
|
|
23 Feb 2012, 12:32
Message
#2
|
|
 Macbidouilleur d'argent ! Groupe : Membres Messages : 748 Inscrit : 22 Jan 2006 Membre no 54 042 |
= ≠ ==
|
|
|
|
|
23 Feb 2012, 12:52
Message
#3
|
|
|
Adepte de Macbidouille Groupe : Membres Messages : 242 Inscrit : 2 Feb 2009 Membre no 130 546 |
Citation (iFef @ 23 Feb 2012, 12:32)  = ≠ == Bon, donc, si je comprends bien (pas évident avec toutes ces expliquations ) maintenant j'en suis là :function doSomething(obj) { if (obj.style.color == 'black'){ obj.style.color = 'pink' } else { obj.style.color = 'black' } } Mais pas mieux ! |
|
|
|
|
23 Feb 2012, 13:14
Message
#4
|
|
 Macbidouilleur d'Or ! Groupe : Membres Messages : 2 031 Inscrit : 27 Apr 2004 Membre no 18 176 |
Tu es sur la bonne voie ...
-------------------- Membre du club des AIPBP (Anciens Inscrits Pas Beaucoup de Posts) Voir la liste
Futur ex-macbidouilleur, sous Dell / Ubuntu depuis 2021 ! |
|
|
|
|
23 Feb 2012, 13:17
Message
#5
|
|
 Macbidouilleur de vermeil ! Groupe : Membres Messages : 951 Inscrit : 19 May 2005 Lieu : Chateauneuf du pape Membre no 39 495 |
coucou;
tu te trompes dans le else.. ta function dit si cest noir passe au rose.; sinon passe au noir donc quand cest noir ca passe bien au rose mais quand cest rose il se passe rien.. Code function doSomething(obj) { if (obj.style.color == 'black'){ obj.style.color = 'pink' } if (obj.style.color == 'pink'){ obj.style.color = 'black' } } pour faire plus propre mais je connais mal le javsscript a la fin des condition tu met un return pour eviter les test inutile -------------------- Musique techno avec MAO (Logic Pro)
des que quelqu'un a du pouvoir il croit détenir la vérité... Des que quelqu'un a un clavier il A la la vérité.(Forcément) |
|
|
|
|
23 Feb 2012, 13:36
Message
#6
|
|
|
Adepte de Macbidouille Groupe : Membres Messages : 242 Inscrit : 2 Feb 2009 Membre no 130 546 |
Bonjour, et merci, mais ça ne fonctionne toujours pas
 je mets tout le code, au cas ou : CODE <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type="text/javascript"> function doSomething(obj) { if (obj.style.color == 'black'){ obj.style.color = 'pink' } if (obj.style.color == 'pink'){ obj.style.color = 'black' } } } </script> <title>Titre</title> </head> <body> <p><span onclick="doSomething(this);">blablabla </span></p> </body> |
|
|
|
|
23 Feb 2012, 13:41
Message
#7
|
|
 Macbidouilleur d'Or ! Groupe : Membres Messages : 2 642 Inscrit : 21 Feb 2011 Membre no 164 827 |
Hello,
et comme ceci ? Code if (obj.style.color == 'black') { obj.style.color = 'pink' } else if (obj.style.color == 'pink') { obj.style.color = 'black' } Ca devrait le faire normalement. Ce message a été modifié par grogeek - 23 Feb 2012, 13:47. -------------------- ex-membre
|
|
|
|
|
23 Feb 2012, 13:44
Message
#8
|
|
|
Macbidouilleur de vermeil ! Groupe : Membres Messages : 951 Inscrit : 19 May 2005 Lieu : Chateauneuf du pape Membre no 39 495 |
coucou;
tu as une accolade de trop dans la fonction. -------------------- Musique techno avec MAO (Logic Pro)
des que quelqu'un a du pouvoir il croit détenir la vérité... Des que quelqu'un a un clavier il A la la vérité.(Forcément) |
|
|
|
|
23 Feb 2012, 13:47
Message
#9
|
|
|
Adepte de Macbidouille Groupe : Membres Messages : 242 Inscrit : 2 Feb 2009 Membre no 130 546 |
Rien non plus
 En fait, depuis que j'ai mis le == il ne se passe plus rien… Même plus de passage en rose. Je vous rassure, je recharge la page à chaque modification  @ hubeert, oui je l'avais vu, mais avec ou sans rien ne se passe… Si je mets juste : function doSomething(obj) { obj.style.color = 'pink' } le texte passe bien en rose Ce message a été modifié par Carlitospsd - 23 Feb 2012, 13:53. |
|
|
|
|
23 Feb 2012, 14:00
Message
#10
|
|
|
Macbidouilleur d'Or ! Groupe : Membres Messages : 2 642 Inscrit : 21 Feb 2011 Membre no 164 827 |
Il y a un soucis avec obj.style.color !
en fait même si il est rose, il croit qu'il est encore noir ! voila le code de la page de test: Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type="text/javascript"> function doSomething(obj) { if (obj.style.color = 'black'){ alert('test si je suis noir'); obj.style.color = 'pink'; return; } if (obj.style.color = 'pink') { alert('test si je suis rose'); obj.style.color = 'black'; return; } } </script> <title>Titre</title> </head> <body> <span onclick="doSomething(this);">blablabla</span> </body> A ta place, je travaillerais avec Jquery + css. (du reste je bosse comme cela et je n'ai jamais été confronté à un problème d'identification comme ici. Au click l'action changera le code css de manière sûre. C'est super simple à mettre en place. Edit: ou alors ce n'est pas obj.style.color qu'il faut utiliser, mais comme je bosse avec Jquery (libraire JS) je n'utilise pas cela. Ce message a été modifié par grogeek - 23 Feb 2012, 14:36. -------------------- ex-membre
|
|
|
|
|
23 Feb 2012, 14:25
Message
#11
|
|
|
Adepte de Macbidouille Groupe : Membres Messages : 242 Inscrit : 2 Feb 2009 Membre no 130 546 |
OK, donc je vais tenter avec Jquery, mais je vais encore moins comprendre ce que je vais faire !
 Je reviens vers vous tout à l'heure |
|
|
|
|
23 Feb 2012, 14:36
Message
#12
|
|
|
Macbidouilleur d'Or ! Groupe : Membres Messages : 2 642 Inscrit : 21 Feb 2011 Membre no 164 827 |
Je vire ma page de test
-------------------- ex-membre
|
|
|
|
|
23 Feb 2012, 14:41
Message
#13
|
|
|
Adepte de Macbidouille Groupe : Membres Messages : 242 Inscrit : 2 Feb 2009 Membre no 130 546 |
Alors, avec jquery ça donne ça :
CODE <?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script src="jquery-1.6.2.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $('.tap').click(function(){ if (this.style.color == 'black') {this.style.color='pink'} else if (this.style.color == 'pink') {this.style.color='black'} }); }); </script> <title>Titre</title> <link href="template.css" rel="stylesheet" type="text/css"/> </head> <body> <p><span class="tap">blablabla</span></p> </body> Donc je ne comprends pas tout. Je récupéré du code quelque part qui servait a afficher un message au click. Là comme ça, ça ne fait rien. Si je mets this.style.color = 'pink'; le texte change bien de couleur. Je précise que les fichiers html, css, js son sur mon bureau. Ce message a été modifié par Carlitospsd - 23 Feb 2012, 14:53. |
|
|
|
|
23 Feb 2012, 14:45
Message
#14
|
|
|
Macbidouilleur de vermeil ! Groupe : Membres Messages : 951 Inscrit : 19 May 2005 Lieu : Chateauneuf du pape Membre no 39 495 |
Coucou ,
Grogeek Dans ton code tu remets des imputation à la place du signe d égalité donc en effet il voit que du noir Sinon ton premier code avec else était bon et les égalité à la place des imputation, mon rajout ne sert à rien désolé ça vient d autre chose mais je sais pas t aider Ce message a été modifié par hubeert - 23 Feb 2012, 14:51. -------------------- Musique techno avec MAO (Logic Pro)
des que quelqu'un a du pouvoir il croit détenir la vérité... Des que quelqu'un a un clavier il A la la vérité.(Forcément) |
|
|
|
|
23 Feb 2012, 14:46
Message
#15
|
|
|
Adepte de Macbidouille Groupe : Membres Messages : 242 Inscrit : 2 Feb 2009 Membre no 130 546 |
Citation (grogeek @ 23 Feb 2012, 14:36) Je vire ma page de test Merci en tout cas ! |
|
|
|
|
23 Feb 2012, 14:55
Message
#16
|
|
|
Macbidouilleur d'Or ! Groupe : Membres Messages : 2 642 Inscrit : 21 Feb 2011 Membre no 164 827 |
Citation (hubeert @ 23 Feb 2012, 14:45) Coucou , Grogeek Dans ton code tu remets des imputation à la place du signe d égalité donc en effet il voit que du noir Sinon ton premier code avec else était bon et les égalité à la place des imputation, mon rajout ne sert à rien désolé ça vient d autre chose mais je sais pas t aider ouais j'ai repris le code présent ici juste pour voir, car il ne voulait rien faire avec "==" vu que je ne suis pas expert en JS et quand je code, je n'appelle pas mes fonctions de la sorte mais avec les outils proposé par Jquery, je peux dire que je suis un peu perdu avec du JS uniquement. Merci pour ta précision. Code $('monDiv').click(function (){ /* mon test se place ici */ }); Ce message a été modifié par grogeek - 23 Feb 2012, 15:02. -------------------- ex-membre
|
|
|
|
|
23 Feb 2012, 15:18
Message
#17
|
|
|
Adepte de Macbidouille Groupe : Membres Messages : 242 Inscrit : 2 Feb 2009 Membre no 130 546 |
Donc suis-je sur la bonne voix avec mon nouveau code et le jquery ?
|
|
|
|
|
23 Feb 2012, 15:27
Message
#18
|
|
|
Macbidouilleur d'Or ! Groupe : Membres Messages : 2 642 Inscrit : 21 Feb 2011 Membre no 164 827 |
Citation (Carlitospsd @ 23 Feb 2012, 15:18) Donc suis-je sur la bonne voix avec mon nouveau code et le jquery ? il faut charger ton script Jquery Après avoir chargé ta page , pas au sommet comme du JS. Dans le Head, tu link Jquery, OK ! Après tu fais ta page HTML Puis en fin de page tu mets ton script juste avant la fermeture du <body> soit dans un fichier séparé (ce que je fais, plus clair je trouve) soit directement entre les balises Code <script type="text/javascript" src="mapageJS.js"></script> </body> </html> Ou Code <script type="text/javascript"> Le script </script> </body> </html> EDIT à 16h04 Voila le code fonctionne chez moi sans problème Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <link href="template.css" rel="stylesheet" type="text/css"/> <title>Titre</title> </head> <body> <p><span class="tap">blablabla</span></p> <script type="text/javascript"> $('.tap').click(function(){ // on récupère la couleur active et ca donne une mesure RGB ! ATTENTION ! var color = $(this).css("color"); if (color == 'rgb(0, 0, 0)') { $(this).css({'color': 'pink'}); } else if (color == 'rgb(255, 192, 203)') { $(this).css({'color': 'black'}); } }); </script> </body> Perso, je ne testerais pas la couleur car les valeurs RGB sont pénibles à calculer comparé au CSS. En fait, je ferais 2 class CSS avec des couleurs différentes: .tap-black et .tap-pink et après avec Jquery, je teste quelle Class est active et je les fais switcher. Tu peux aussi directement faire <p class="tap-black"> tout dépend la structure de ton code En espérant t'avoir ouvert la voie.  PS: ne pas oublier de mettre dans ta class la valeur: cursor:pointer afin d'afficher le texte comme si c'était un lien Ce message a été modifié par grogeek - 23 Feb 2012, 16:07. -------------------- ex-membre
|
|
|
|
|
23 Feb 2012, 16:29
Message
#19
|
|
|
Adepte de Macbidouille Groupe : Membres Messages : 242 Inscrit : 2 Feb 2009 Membre no 130 546 |
Ok merci,
je vais regarder tout ça au calme, et je te tiens au courant ! Houra ! J'avais pas vu ton edit ! Merci beaucoup ! |
|
|
|
|
23 Feb 2012, 16:31
Message
#20
|
|
|
Macbidouilleur d'Or ! Groupe : Membres Messages : 2 642 Inscrit : 21 Feb 2011 Membre no 164 827 |
tu switch de class comme ceci:
Code if ( $(this).hasClass('tap-black') ) { $(this).removeClass('tap-black').addClass('tap-pink'); } else if ($(this).hasClass('tap-pink')){ $(this).removeClass('tap-pink').addClass('tap-black'); } Dès qu'on a compris le fonctionnement de Jquery, c'est très simple à utiliser un lien vers la doc http://docs.jquery.com/Main_Page
Ce message a été modifié par grogeek - 23 Feb 2012, 16:36. -------------------- ex-membre
|
|
|
|
|
23 Feb 2012, 16:46
Message
#21
|
|
|
Adepte de Macbidouille Groupe : Membres Messages : 242 Inscrit : 2 Feb 2009 Membre no 130 546 |
Effectivement ça semble plus souple de changer de class.
|
|
|
|
|
23 Feb 2012, 17:09
Message
#22
|
|
 Macbidouilleur d'Or ! Groupe : Membres Messages : 4 687 Inscrit : 28 Nov 2001 Lieu : Pas loin du grand pic qu'on surnomme Tour Eiffel Membre no 1 440 |
Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Titre</title> <script type="text/javascript"> function doSomething(obj) { alert(obj.style.color); if (obj.style.color == 'black' || obj.style.color == ''){ alert('test si je suis noir'); obj.style.color = 'pink'; return; } else { /* pink */ alert('test si je suis rose'); obj.style.color = 'black'; return; } } </script> </head> <body> <span onclick="doSomething(this);">blablabla</span> </body> Voici un code qui marche en pur JS. Tu peux virer les alerts. En fait ça marchait pas car au départ ton span n'est pas noir, mais indéfini. Donc il rentrait pas dans le if et ne changeai pas de couleur. Ensuite, je ne sais pas pourquoi, mais lorsque le texte est transformé en rose, celui-ci prend une valeur rgb. Alors que quand on le retransforme en noir sa valeur est bien 'black' et pas rgb(0,0,0). Mystères du Javascript... Donc pour faciliter la chose, je teste pas si rose (==rgb(255,...,...) mais je dis que si pas noir, revient à noir. Ce qui donne le même résultat. C'est d'ailleurs ce que tu as codé au départ. Avec ça, la leçon du jour surtout quand on domine pas un langage, tester et être sûr des valeurs des variables qu'on manipule. Un echo printf ou un alert suivant le langage suffisent. -------------------- Mordu de Mac depuis 1996, avec un Performa 6230CD sous Mac OS 7.5.1. Depuis l'extinction de Steve Jobs, le logiciel libre se fait de plus en plus présent dans ma vie numérique.
|
|
|
|
|
23 Feb 2012, 20:10
Message
#23
|
|
|
Macbidouilleur d'Or ! Groupe : Membres Messages : 2 642 Inscrit : 21 Feb 2011 Membre no 164 827 |
@macuser
Merci pour le code et surtout me conforter sur le coup de span sans couleur définie. Cela m'avait traversé l'esprit mais je m'étais dit que non, pas ça, vu qu'on voit le texte noir... (Ce qui doit etre les prefs de base des browsers non?) :-) Edit: serait-ce le doctype qui donne des valeurs rgb(0,0,0) a la place #00000 ?? Ce message a été modifié par grogeek - 23 Feb 2012, 20:21. -------------------- ex-membre
|
|
|
|
|
23 Feb 2012, 21:43
Message
#24
|
|
|
Macbidouilleur d'Or ! Groupe : Membres Messages : 4 687 Inscrit : 28 Nov 2001 Lieu : Pas loin du grand pic qu'on surnomme Tour Eiffel Membre no 1 440 |
C'est une question de DOM. Le texte est noir parce que c'est la valeur par défaut ou défini par une autre balise plus ample (un div qui englobe le tout par ex) mais aucune valeur explicite est donnée pour l'attribut color de ce span. Ça fait un état de départ inconnu. Si on part sur le span suivant:
Code <span style="color: black;" onclick="doSomething(this);"> ce cas particulier est réglé aussi. Deux solutions pour un même problème. Quant aux couleurs, je ne suis pas un spécialiste (et dit donc peut être une bêtise) mais je crois bien d'après ce que j'ai pu trouver (aucun document vraiment "scientifique") l'explication serait que la convention hexa a été introduite par IE et la convention rgb() vient de netscape qui a été reprise par défaut par Safari. Si vous faites tourner ce code sur IE ou Firefox vous aurez bien "pink" comme valeur pour color une fois qu'il est passé au rose. La valeur rgb semble être une particularité de Safari. Il faut donc faire attention, ce code n'est apparemment pas soumis aux standards, ce qui implique des cas particuliers à traiter selon le navigateur utilisé. -------------------- Mordu de Mac depuis 1996, avec un Performa 6230CD sous Mac OS 7.5.1. Depuis l'extinction de Steve Jobs, le logiciel libre se fait de plus en plus présent dans ma vie numérique.
|
|
|
|
|
24 Feb 2012, 07:03
Message
#25
|
|
|
Macbidouilleur d'Or ! Groupe : Membres Messages : 2 642 Inscrit : 21 Feb 2011 Membre no 164 827 |
Citation (macuserfr @ 23 Feb 2012, 21:43) Si vous faites tourner ce code sur IE ou Firefox vous aurez bien "pink" comme valeur pour color une fois qu'il est passé au rose. La valeur rgb semble être une particularité de Safari. Il faut donc faire attention, ce code n'est apparemment pas soumis aux standards, ce qui implique des cas particuliers à traiter selon le navigateur utilisé. Non, suis sur FF et j'avais bien le noir quand il était rose. En tout cas merci!
-------------------- ex-membre
|
|
|
|
|
24 Feb 2012, 07:53
Message
#26
|
|
|
Macbidouilleur d'Or ! Groupe : Membres Messages : 4 687 Inscrit : 28 Nov 2001 Lieu : Pas loin du grand pic qu'on surnomme Tour Eiffel Membre no 1 440 |
On s'est mal compris. Je voulais dire qu'une fois le texte en rose, quand on teste la couleur, il répond 'pink' sous IE 6 et FF 9 alors qu'il répond rgb(...) sous Safari 5.1. Le noir est bien vu comme 'black' partout. Je me demande si ce comportement est voulu ou si c'est un bug de Safari?
-------------------- Mordu de Mac depuis 1996, avec un Performa 6230CD sous Mac OS 7.5.1. Depuis l'extinction de Steve Jobs, le logiciel libre se fait de plus en plus présent dans ma vie numérique.
|
|
|
|
|
24 Feb 2012, 08:05
Message
#27
|
|
|
Macbidouilleur d'Or ! Groupe : Membres Messages : 2 642 Inscrit : 21 Feb 2011 Membre no 164 827 |
Citation (macuserfr @ 24 Feb 2012, 07:53) On s'est mal compris. Je voulais dire qu'une fois le texte en rose, quand on teste la couleur, il répond 'pink' sous IE 6 et FF 9 alors qu'il répond rgb(...) sous Safari 5.1. Le noir est bien vu comme 'black' partout. Je me demande si ce comportement est voulu ou si c'est un bug de Safari? Non, on s'est bien compris. Chez moi sous FF10 (win 7 ultimate) il répond bien RGB() quand je fais un alert(); Edit: J'ai du reste été très surpris, je m'attendais soit à de l'hexa soit le mot black Ce message a été modifié par grogeek - 24 Feb 2012, 08:29. -------------------- ex-membre
|
|
|
|
|
24 Feb 2012, 08:11
Message
#28
|
|
|
Macbidouilleur d'Or ! Groupe : Membres Messages : 4 687 Inscrit : 28 Nov 2001 Lieu : Pas loin du grand pic qu'on surnomme Tour Eiffel Membre no 1 440 |
Intéressant!
FF 10.0.2 sous Mac a le même comportement que le 9.0.1, càd, il répond pink. Donc même pas d'homogénéité entre plateformes sur le même navigateur. Quel bordel! -------------------- Mordu de Mac depuis 1996, avec un Performa 6230CD sous Mac OS 7.5.1. Depuis l'extinction de Steve Jobs, le logiciel libre se fait de plus en plus présent dans ma vie numérique.
|
|
|
|
|
25 Feb 2012, 16:52
Message
#29
|
|
|
Macbidouilleur d'argent ! Groupe : Membres Messages : 748 Inscrit : 22 Jan 2006 Membre no 54 042 |
D'où l'essor de jQuery !
|
|
|
|
|
25 Feb 2012, 17:10
Message
#30
|
|
 Macbidouilleur d'Or ! Groupe : Membres Messages : 4 820 Inscrit : 1 Jul 2010 Membre no 156 073 |
Ce plugin jQuery dispose de méthods qui retournent les valeurs de couleur formatées : xcolor.
getRGB() - Returns the color as RGB object getHSV() - Returns the color as HSV object getInt() - Returns the color as normalized integer value getArray() - Returns the color as simple array getFraction() - Returns the color as fractions object, with every value in the interval [0, 1] getCss() - Returns the color formatted as a string to be passed to a CSS color attribute getName() - Returns the nearest color name getHex() - Returns the color as Hex string (default) -------------------- L'homme n'est que poussière... c'est dire l'importance du plumeau ! Alexandre Vialatte
|
|
|
|
|
1 utilisateur(s) sur ce sujet (1 invité(s) et 0 utilisateur(s) anonyme(s))
0 membre(s) :
| Nous sommes le : 19th April 2024 - 04:16 |