Discussion :

[moimp]

Bonjour à tous,
Je souhaite comparer une couleur à une chaîne représentant une couleur. Dans le script qui suit, seule la première ligne semble fonctionner avec Chrome. Cependant, est-ce que l'introduction de blanc après la virgule peut ne pas toujours être bien interprétée selon les navigateurs?

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
	if (getComputedStyle(line, null).color == 'rgb(255, 0, 0)') alert('rouge');
	if (getComputedStyle(line, null).color == 'rgb(255,0,0)') alert('rouge');
	if (getComputedStyle(line, null).color == '#ff0000') alert('rouge');
	if (getComputedStyle(line, null).color == 'red') alert('rouge');

[Invité]

bonjour,

ce n'est pas difficile à vérifier :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

alert( getComputedStyle(line, null).color );

[Kennel sébastien]

Plutôt ainsi :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
if(getComputedStyle(line, null).getPropertyValue("color") === 'rgb(255, 0, 0)') {
    alert('rouge');
}

Parce que sinon tu t'embêtes avec plein de conditions et pas que le problème des espaces car tu as aussi « #f00 » pour « rgb(255, 0, 0) ».

[moimp]

J'ai posé cette question parce que j'ai lu à plusieurs endroits que les navigateurs ne renvoient pas tous la même valeur pour

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

getComputedStyle(line, null).color

J'ai vérifié avec Chrome, IE et FF et ça fonctionne avec les trois.

Mais est-ce que selon les navigateurs, il peut y avoir des résultats différents avec les deux lignes suivantes:

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
getComputedStyle(line, null).color
getComputedStyle(line, null).getPropertyValue("color")

[Kennel sébastien]

Pour ton problème avec les navigateurs, cela fonctionne correctement avec « rgb(255, 0, 0) » pour FF, Chrome, IE, Safari et Konqueror.

En revanche en effet Opera retourne, curieusement un formatage : « #ff0000 »

Donc tu dois faire une condition pour celui-ci avec « navigator.userAgent »

[moimp]

En fait, j'ai adopté le code suivant qui me paraît plus général et peut convenir à d'autres cas éventuels:

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
	if (getComputedStyle(line, null).color == 'rgb(255, 0, 0)') alert('rouge');
	else if (getComputedStyle(line, null).color == '#ff0000') alert('rouge');
	else if (getComputedStyle(line, null).color == '#f00') alert('rouge');