Accès à la méthode setattribute('style','') sous ie6

0/5 (4 avis)

Snippet vu 3 839 fois - Téléchargée 20 fois

Commenter

Contenu du snippet

Bonjour,
Sous IE6, la méthode setAttribute('style','height:100%') n'est pas permise (merci Bill). Il faut donc passer par object.style.height = '100%'.

fatigué de ce problème de compatibilité j'ai crée cette mini (riquiqui?) fonction qui me permet de ne plus me préoccuper de la version du navigateur.

usage :
my_div_handler = getElementById('my_div');
setAttributeStyle( 'height:100%;font-weigth:bold;line-height:16px;text-color:red', my_div_handler);

Source / Exemple : 


//////////////////////////////
// function setAttributeStyle( string style, object_handler object)
//
// auteur: Nicolas LE DREFF
// date: 13/03/2010
//
// cette fonction s'occupe d'appliquer à la volée un style contenu dans une chaine de caractère.
// Sous IE6, la méthode setAttribute('style','height:100%') n'est pas permise. Il faut passer par object.style.height = '100%'.
// usage : 
// my_div_handler = getElementById('my_div');
// setAttributeStyle( 'height:100%;font-weigth:bold;line-height:16px;text-color:red', my_div_handler);

function setAttributeStyle( style, object)
{
	object.setAttribute('style',style);      // d'abord on applique avec la méthode récente
        if(!object.attributes.getNamedItem('style').nodeValue)    // si malgré celà, la propriété style vaut 'null'
        {
		var style_reg = new RegExp("[;]+", "g");           // on recherche les ';'
		var tableau_attributes = style.split(style_reg);    // on explose le style avec l'expression régulière
		for (var i=0; i<tableau_attributes.length; i++) {    //on passe en revue les != éléments
                        // on retire les espace superflus
			tableau_attributes[i] = tableau_attributes[i].replace(/^\s+/g,'').replace(/\s+$/g,'');
			var attributes_reg = new RegExp("[:]+", "g");   // on recherche les ':'
			tableau_attribute_value = tableau_attributes[i].split(attributes_reg); // on explose 
			attribute_name = tableau_attribute_value[0];   // le premier élément est le nom de l'attribut
                        var attributes_name_reg = new RegExp("[-]+", "g");  // on recherche les '-'
                        tableau_attribute_name = attribute_name.split(attributes_name_reg);   // on explose

                        if(tableau_attribute_name.length > 1)   // si le tableau a plus d'1 élément, il y avait 1 '-'
                        {
                                // on passe en majuscule l'initiale du 2ème morceau
                                initiale_attribute_name = tableau_attribute_name[1].substr(0,1).toUpperCase();
                                // on remet tout dans la bonne boite
                                tableau_attribute_name[1] = initiale_attribute_name + tableau_attribute_name[1].substr(1,(tableau_attribute_name[1].length -1));
                                attribute_name = tableau_attribute_name.join('');  // on ré-assemble les deux morceaux
                        }
			attribute_value =  tableau_attribute_value[1];  // la valeur de l'attribut
			object.style[attribute_name] = attribute_value;   // application de l'attribut
		}
        }

}

Conclusion :


Voilà, rien de bien fantastique, mais c'est fonctionnel.

Enjoy...

A voir également

Ajouter un commentaire Commentaires
cs_Kimjoa Messages postés 262 Date d'inscription vendredi 6 mai 2005 Statut Membre Dernière intervention 19 septembre 2014
15 mars 2010 à 13:08
de rien ;)
masternico Messages postés 487 Date d'inscription dimanche 5 octobre 2003 Statut Membre Dernière intervention 1 septembre 2011
15 mars 2010 à 09:19
jdmcreator : je confirme, il ne se passera rien si la propriété n'existe pas.

Kimjoa : mince, t'étais où quand j'ai fait mes recherches???
Jamais je n'ai trouvé ne serait-ce qu'un indice à ce sujet. Et pourtant il y a beaucoup de personnes qui buttent sur ce problème.

Bon ben... je n'ai plus qu'à remettre ma fonction au fond de ma poche alors... Elle pourra toujours reservir pour faire du découpage de chaine et ajout d'une majuscule...

Merci en tout cas.
cs_Kimjoa Messages postés 262 Date d'inscription vendredi 6 mai 2005 Statut Membre Dernière intervention 19 septembre 2014
14 mars 2010 à 22:15
normalement ca fait rien jdmcreator.
Sinon pour ta source masternico, tu dois certainement pas connaitre la proriété ccText de l'objet style :

document.getElementById('test').style.cssText += 'border : 1px solid black; background : red';

marche sur ie6.

a+
jdmcreator Messages postés 647 Date d'inscription samedi 30 décembre 2000 Statut Membre Dernière intervention 20 juillet 2012 7
14 mars 2010 à 20:04
Bonjour,

je demande, si on tente d'appliquer un style non-supporté par IE6 (ex -webkit-border-radius) est-ce que cela fonctionnera tout de même ?

Merci beaucoup ;)
S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (masternico)