Compatibilité navigateur sur la récupération des couleurs

**Usul42** · 19/05/2016, 16h58

Bonjour à tous !

J'ai un petit souci sur une fonctionnalité javascript que j'ai implémenté à une de mes pages. Celle ci sert à changer la couleur de fond d'un élément quand la souris est passée dessus. La fonctionnalité marche très bien sur IE mais refuse de fonctionner sur Firefox.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
function overLine(div){
 
	console.log(div.style.background);
 
	if(div.style.background == "rgb(221, 221, 221)"){					
	div.style.background = "rgb(171, 191, 221)"; 			
	} 
	else if(div.style.background == "rgb(187, 187, 187)"){	
	div.style.background = "rgb(76, 103, 143)";				
	div.style.color = "#ffffff";							
	} 
	else {div.style.background = "rgb(199, 213, 234)";		
	}
 
 
	}
 
	function outLine(div){
 
	console.log(div.style.background);
 
	if(div.style.background == "rgb(171, 191, 221)"){		
	div.style.background = "rgb(221, 221, 221)";			
	} 
	else if(div.style.background == "rgb(76, 103, 143)"){	
	div.style.background = "rgb(187, 187, 187)";		
	div.style.color = "#000000";						
	} 
	else {div.style.background = "#ffffff";					
	}
	}

Le problème est que les tests conditionnels de la première fonction ne sont pas vérifiés lors de la première exécution, et la fonction renvoie toujours :

Code :

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

div.style.background = "rgb(199, 213, 234)"

Bien évidement la seconde fonction renvoie du coup toujours :

Code :

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

div.style.background = "#ffffff"

Et ça transforme toute mes couleurs de fond en blanc au passage de la souris...

Si quelqu'un s'y connait en compatibilité navigateur, un petit coup de pouce serait le bienvenue !

**zecreator** · 19/05/2016, 17h09

As-tu tenté de remplacer les valeurs de style "rgb()" par "#XXXXXX" ?

**Usul42** · 19/05/2016, 17h23

Non, mais je ne pense pas que le problème vienne de là. En bidouillant un peu je viens de rendre mon script compatible Firefox, mais il n'est du coup plus compatible sur IE...

La différence entre les deux viens du retour de la fonction :

Code :

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

div.style.background

Celle-ci renvoie :
-"rgb(***, ***, ***) none repeat scroll 0% 0%" sur Firefox.
-"rgb(***, ***, ***)" sur IE.

Je vois donc mieux d’où vient le problème, mais je ne sais malheureusement pas comment prendre en compte le navigateur pour modifier la condition de mon if en javascript.

**NoSmoking** · 19/05/2016, 18h31

Bonjour,
je ne vois pas l’intérêt de faire un test sur la couleur car comme tu viens de le voir le retour n'est pas identique suivant le navigateur.
Tu pourrais essayé avec getComputedStyle(), mais le plus simple me semble de gérer le « over/out » via le CSS ou encore d'affecter un class à tes éléments au survol et de la retirer lorsque l'on quitte l'élément.