Erreur syntaxe CSSrules/rules? (compatibilité IE/Firefox)

Bonjour,

Mon script fonctionne sous Firefox mais je désespère de réussir à le faire fonctionner sous IE...

<script type="text/javascript">
	function main() {
		var addEvent = listener;
		addEvent(document, "click", hidder)
	}

	function listener(obj,evType,fn)
	{
		if(obj.addEventListener)
		{
			obj.addEventListener(evType,fn,false);
		} 
		else if(obj.attachEvent)
		{
			obj.attachEvent("on"+evType,fn) ;
		}
	}
	
	function hidder(e)
	{
		if(!e) e=window.event
		var el = e.target || e.srcElement;
		var over_id = el.id;
		
		var class_css = new Array();

		menu_num = 3;
		rules_num = document.styleSheets[0].cssRules.length || document.styleSheets[0].rules.length;
		
		/* Les boucles suivantes permetent d'établir la correspondance entre les classes html et les classes css*/
		for (j=0; j< rules_num; j++)
		{
			rules_name = document.styleSheets[0].cssRules[j].cssText.substr(0,8) || document.styleSheets[0].rules[j].cssText.substr(0,8);/*récupération du nom des classes*/
			
			for (i=1; i<=menu_num; i++)
			{
				ss_mn = '.ss_mn_'+i;
				
				if(ss_mn === rules_name)
				{
					class_css[i] = j; /*on remplit le tableau des correspondances*/
				}
			}
		}

		/* boucle de déploiment - fermeture des menus */
		for (i=1; i<=menu_num; i++)
		{
			mn = 'mn_'+i;
			
			if(over_id === mn)
			{
				j = class_css[i];
				texte = document.styleSheets[0].cssRules[j].style.height || document.styleSheets[0].rules[j].style.height;
				maReg = new RegExp("[0-9]+", "g" ) ;
				resultat = texte.match( maReg ) ;
				height = parseInt(resultat[0]);
			
				if(document.styleSheets[0].cssRules[j].style.display)
				{
					document.styleSheets[0].cssRules[j].style.display = 'block';
				}
				else if(document.styleSheets[0].rules[j].style.display)
				{
					document.styleSheets[0].rules[j].style.display = 'block';
				}

				ref = j ;
				
				heighter(ref,height);
			}
			else
			{
				//document.styleSheets[0].cssRules[class_css[i]].style.height = 0;
				
				texte2 = document.styleSheets[0].cssRules[class_css[i]].style.height || document.styleSheets[0].rules[class_css[i]].style.height;
				maReg = new RegExp("[0-9]+", "g" ) ;
				resultat2 = texte2.match( maReg ) ;
				height2 = parseInt(resultat2[0]);

				ref2 = class_css[i] ;
				
				min_heighter(ref2,height2);
				
				//document.styleSheets[0].cssRules[class_css[i]].style.display = 'none';
			}
		}
	}
	
	function heighter(ref,height) /* permet d'augementer la propriété height */
	{
		if(height <= 30)
		{
			new_height = height+1;
			if(document.styleSheets[0].cssRules[ref].style.height)
			{
				document.styleSheets[0].cssRules[ref].style.height = new_height+'px' ;
			}
			else if(document.styleSheets[0].rules[ref].style.height)
			{
				document.styleSheets[0].rules[ref].style.height = new_height+'px' ;
			}
			setTimeout('heighter(ref,new_height)', 10);
		}
	}
	
	function min_heighter(ref2,height2) /* permet de diminuer la propriété height */
	{
		if(height2 > 0)
		{
			new_height2 = height2-1;
			if(document.styleSheets[0].cssRules[ref2].style.height)
			{
				document.styleSheets[0].cssRules[ref2].style.height = new_height2+'px' ;
			}
			else if(document.styleSheets[0].rules[ref2].style.height)
			{
				document.styleSheets[0].rules[ref2].style.height = new_height2+'px' ;
			}
			setTimeout('min_heighter(ref2,new_height2)', 10);
		}
	}
	
	main();

[/i][/i][/i][/i][/i][/i][/i] Je n'arrive pas à trouver quelle est l'erreur...
Modifié par xephres (25 Jan 2010 - 13:38)

Personne?

J'ai un peu progressé de mon côté, mais sous IE6 il refuse d'appliquer le style

document.styleSheets[0].rules[j].style.display = 'block';

Il retrouve bien la propriété par défaut à "none" mais impossible de modifier la valeur... Et pourtant sur différents forum, cette syntaxe est sensée fonctionner.

Heeeeelp!

Petit up,

En fait mon problème vient de l'interprétation de javascript par les navigateurs. Si le premier if marche pour un navigateur, dans l'autre navigateur, le else if sera ignoré. Tout se passe comme si les navigateurs testent seulement le premier if et si ça ne fonctionne pas, le script est stoppé. Le cas suivant fonctionne sous IE6 et se plante immanquablement sous FF

		if(document.styleSheets[0].rules)
		{
			rules_num = document.styleSheets[0].rules.length;
		}
		else if(document.styleSheets[0].cssRules)
		{
			rules_num = document.styleSheets[0].cssRules.length;
		}

La syntaxe rules_num = règle ie || règle FF ne fonctionne pas mieux, a priori c'est le même problème.

Existe une solution simple ou faut-il ajouter systématiquement le test du navigateur? Je croyais que la syntaxe || ne posais pas de problème puisque le comportement est correct pour var el= e.target || e.srcElement.

Si quelqu'un à une solution ou une explication...

Petit Up... Faute de réponse... La seule solution est-elle de passer par une détection du navigateur?
Modifié par xephres (28 Jan 2010 - 11:46)