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

Soyez le premier à donner votre avis sur cette source.

Snippet vu 3 507 fois - Téléchargée 17 fois

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

Messages postés
264
Date d'inscription
vendredi 6 mai 2005
Statut
Membre
Dernière intervention
19 septembre 2014

de rien ;)
Messages postés
487
Date d'inscription
dimanche 5 octobre 2003
Statut
Membre
Dernière intervention
1 septembre 2011

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.
Messages postés
264
Date d'inscription
vendredi 6 mai 2005
Statut
Membre
Dernière intervention
19 septembre 2014

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+
Messages postés
647
Date d'inscription
samedi 30 décembre 2000
Statut
Membre
Dernière intervention
20 juillet 2012
5
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 ;)

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.