OVH Cloud OVH Cloud

Inversion de couleurs

9 réponses
Avatar
M
Bonjour,

J'essaie de faire alterner la couleur d'un texte à chaque appel d'une
fonction js.

---------------------------------------------
function swap(id) {

green = '#00f000';
red = '#f00006';

if (document.getElementById(id).style.color == green)
document.getElementById(id).style.color = red;
else
document.getElementById(id).style.color = green;

}
-----------------------------------------------

Ca a l'air simple, mais seul l'affectation fonctionne :
document.getElementById(id).style.color = green; // Ca marche

Mais le test ne marche pas :
if (document.getElementById(id).style.color == green) // retourne
toujours false

Quand je fais :
alert(document.getElementById(id).style.color)
J'obtiens une chaine vide...

Je ne sais pas comment récupérer la couleur d'un texte.
Merci pour votre aide !

M

9 réponses

Avatar
Olivier Miakinen

J'essaie de faire alterner la couleur d'un texte à chaque appel d'une
fonction js.

Ca a l'air simple, mais seul l'affectation fonctionne :
document.getElementById(id).style.color = green; // Ca marche

Mais le test ne marche pas :
if (document.getElementById(id).style.color == green) // retourne
toujours false

Quand je fais :
alert(document.getElementById(id).style.color)
J'obtiens une chaine vide...


Essaye avec un mix de currentStyle (pour navigateur Microsoft) et
getComputedStyle() (pour navigateurs compatibles W3C) :

http://www.quirksmode.org/dom/w3c_css.html
http://www.quirksmode.org/dom/tests/style.html

Avatar
ASM
Bonjour,

J'essaie de faire alterner la couleur d'un texte à chaque appel d'une
fonction js.

---------------------------------------------
function swap(id) {

green = '#00f000';
red = '#f00006';

if (document.getElementById(id).style.color == green)
document.getElementById(id).style.color = red;
else
document.getElementById(id).style.color = green;

}
-----------------------------------------------

Ca a l'air simple, mais seul l'affectation fonctionne :
document.getElementById(id).style.color = green; // Ca marche


à mon idée, ça ne peut marcher que si le style a été donné à la volée
ou par JavaScript

<div id="truc" style="color:#00f000">


--
Stephane Moriaux et son [moins] vieux Mac

Avatar
Francis Spiesser
Le 05/06/2006, M a supposé :
Bonjour,

J'essaie de faire alterner la couleur d'un texte à chaque appel d'une
fonction js.

---------------------------------------------
function swap(id) {

green = '#00f000';
red = '#f00006';

if (document.getElementById(id).style.color == green)
document.getElementById(id).style.color = red;
else
document.getElementById(id).style.color = green;

}
-----------------------------------------------

Ca a l'air simple, mais seul l'affectation fonctionne :
document.getElementById(id).style.color = green; // Ca marche

Mais le test ne marche pas :
if (document.getElementById(id).style.color == green) // retourne toujours
false

Quand je fais :
alert(document.getElementById(id).style.color)
J'obtiens une chaine vide...

Je ne sais pas comment récupérer la couleur d'un texte.
Merci pour votre aide !

M


if (document.getElementById(id).style.color == 'green')
document.getElementById(id).style.color = 'red';
else
document.getElementById(id).style.color = 'green';

ou plus simplement :
document.getElementById(id).style.color =
(document.getElementById(id).style.color == 'green')?'red':'green';

--
______
Francis (enlever .NIPUBNISOUMIS)
"Tout corps plongé dans un liquide en ressort mouillé"

Avatar
M
Merci ASM,

Ca m'a en effet permis de faire tourner le truc :

function swap(id) {

red = "rgb(240,0,6)";
green = "rgb(0,240,0)";


//alert(document.getElementById(id).style.color);

// On recupere la couleur en supprimant les espaces. En effet,
// pour IE, la couleur vaut : rgb(r,g,b)
// Pour Firefox, la couleur vaut : rgb(r, g, b)
// Noter les espaces apres la virgule !
couleur = document.getElementById(id).style.color;
couleur = couleur.replace(/s/g,"");

if (couleur == green)
document.getElementById(id).style.color = red;
else
document.getElementById(id).style.color = green;

}
----------------------------------------------------
Et dans le HTML :
<span id="test" style="color:#f00006"
onclick="javascript:swap('test');">Le texte</span>
-------------------------------------------------------

à mon idée, ça ne peut marcher que si le style a été donné à la volée
ou par JavaScript

<div id="truc" style="color:#00f000">


Avatar
ASM
Merci ASM,

Ca m'a en effet permis de faire tourner le truc :


Personnellement, pour cette gestion des couleurs dont chaque navigateur
se les arrange à sa sauce,
je préfére passer par des class

La feuille de styles :

.roug { color: #f00 }
.vert { color: #0f0 }

Le javascript :

function swap(id) {
if(document.getElementById && document.getElementById(id)) {
id = document.getElementById(id);
id.className = id.className=='roug'? 'vert' : 'roug';
}
}

Le HTML :

<span id="test" class="vert" onclick="swap(this.id);">Le texte</span>


--
Stephane Moriaux et son [moins] vieux Mac

Avatar
M
Merci encore ASM,

D'autant plus que je venais de découvrir qu'Opera avait encore une
autre façon de retourner la couleur...

M

Merci ASM,

Ca m'a en effet permis de faire tourner le truc :


Personnellement, pour cette gestion des couleurs dont chaque navigateur
se les arrange à sa sauce,
je préfére passer par des class

La feuille de styles :

.roug { color: #f00 }
.vert { color: #0f0 }

Le javascript :

function swap(id) {
if(document.getElementById && document.getElementById(id)) {
id = document.getElementById(id);
id.className = id.className=='roug'? 'vert' : 'roug';
}
}

Le HTML :

<span id="test" class="vert" onclick="swap(this.id);">Le texte</span>





Avatar
ASM
Merci encore ASM,

D'autant plus que je venais de découvrir qu'Opera avait encore une
autre façon de retourner la couleur...


et iCab fait autrement encore ...
et on n'a pas vu ce que faisait Konkeror, Safari, etc etc

on ne s'en sort pas :-(


--
Stephane Moriaux et son [moins] vieux Mac

Avatar
Dr John Stockton
JRS: In article <448622ee$0$856$, dated Wed, 7
Jun 2006 02:50:54 remote, seen in news:fr.comp.lang.javascript, ASM

Le javascript :

function swap(id) {
if(document.getElementById && document.getElementById(id)) {
id = document.getElementById(id);
id.className = id.className=='roug'? 'vert' : 'roug';
}
}



function swap(id) {
if (document.getElementById && id=document.getElementById(id))
id.className = id.className=='roug'? 'vert' : 'roug';
}

peut-etre?

--
© John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v4.00 IE 4 ©
<URL:http://www.jibbering.com/faq/> JL/RC: FAQ of news:comp.lang.javascript
<URL:http://www.merlyn.demon.co.uk/js-index.htm> jscr maths, dates, sources.
<URL:http://www.merlyn.demon.co.uk/> TP/BP/Delphi/jscr/&c, FAQ items, links.

Avatar
ASM
JRS: In article <448622ee$0$856$, dated Wed, 7
Jun 2006 02:50:54 remote, seen in news:fr.comp.lang.javascript, ASM

Le javascript :

function swap(id) {
if(document.getElementById && document.getElementById(id)) {
id = document.getElementById(id);
id.className = id.className=='roug'? 'vert' : 'roug';
}
}



function swap(id) {
if (document.getElementById && id=document.getElementById(id))
id.className = id.className=='roug'? 'vert' : 'roug';
}

peut-etre?



why not ? :-)
certainement plus efficace.

--
Stephane Moriaux et son [moins] vieux Mac