begin process at 2012 02 14 05:31:27
  Trouver un code source :
 
dans
 
Accueil > 

Code

 > 

Trucs & Astuces

 > ACCÈS À LA MÉTHODE SETATTRIBUTE('STYLE','') SOUS IE6

ACCÈS À LA MÉTHODE SETATTRIBUTE('STYLE','') SOUS IE6


 Information sur la source

 Description

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;tex t-color:red', my_div_handler);

Source

  • //////////////////////////////
  • // 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
  • }
  • }
  • }
//////////////////////////////
// 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...


 Sources du même auteur

Source avec une capture CONTRÔLE DU NOMBRE DE CARACTÈRES DANS UN CHAMPS TEXTAREA

 Sources de la même categorie

Source avec Zip Source avec une capture SUBDIVISER LE RÉSULTAT D'UNE RECHERCHE EN PAGES par kimmp
Source avec Zip TIMER : SETTIMEOUT & SETINTERVAL AMÉLIORÉS par jdmcreator
Source avec Zip Source avec une capture ONGLETS ET CHANGEMENT INSTANTANÉ DE LA LANGUE par william voirol
Source avec Zip Source avec une capture COPIER DU TEXTE par m22001111
Source avec Zip DIALOGUE ENTRE FENÊTRES MÈRE ET FILLE par william voirol

 Sources en rapport avec celle ci

CHANGER LA TAILLE DU TEXTE ET OU DE FEUILLE DE STYLE AVEC EN... par Annadrill
Source avec Zip VIRTUAL IPHONE (V.2) par loicseg
DÉTECTER SI CSS EST ACTIVÉ par jdmcreator
Source avec Zip ZOOM À COULISSE POUR AGRANDIR ET MINIMISER LE CONTENU DE PAR... par abdelaziz_info
Source avec Zip XSTYLE : STYLE ETENDU par foxz

Commentaires et avis

Commentaire de jdmcreator le 14/03/2010 20:04:02

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 ;)

Commentaire de Kimjoa le 14/03/2010 22:15:04

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+

Commentaire de masternico le 15/03/2010 09:19:37

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.

Commentaire de Kimjoa le 15/03/2010 13:08:51

de rien ;)

 Ajouter un commentaire


Discussions en rapport avec ce code source dans le forum

Desactiver la selection d'un texte (mais pas comme tout le monde) [ par gzu51 ] Bon alors voila j'ai un problème sur lequel je me casse les dents : Tout d'abord resumons la situation : j'ai 2 div, le premier contient du texte et e desactiver la selection d'un texte (sans utiliser onselectstart) [ par gzu51 ] Bonjour à tous.Bon alors voila j'ai un problème sur lequel je me casse les dents : Tout d'abord resumons la situation : j'ai 2 div, le premier contien changement style onmouseover onmouseout - bordure tableau, Firefox et IE [ par sebortega ] Salut, j'écris un peu désespéré. Mon but est de mettre en évidence les lignes d'un tableau en les encadrant par une bordure grise en pointillé au pas Javascript faire un setAttribute de style avec FireFox [ par JPVIO ] Bonjour Je cherche à modifier la couleur d'un texte au survol de la souris OK dans une cellule d'un tableau cela fonction trés bien avec IE Mais pas FireFox setAttribute et style [ par fregolo52 ] Bonjour,suivant un événement dans ma page, je cherche à changer le style des mes contrôles.Sous IE, aucun souci, mais sous FF j'ai une erreur.Mon code info bulle js [ par misskis ] Bonjour,J'ai récupéré un script "merci TeDeum" pour créer des info bulle en jsTrés sympa mais j'ai un bug sur ie.Le script :&lt;script language="javas javascript pour ie6 - impression [ par buckdany4 ] Bonjour à tous,Comment rendre l'impression impossible avec ie6 , donc mettre le choix impression invisible, inactif, ou autre.. <p class="MsoNorm aligner les images horizontalement [ par oceane751 ] bonjour à tous avec le code qui suit, mes images defilent de façon verticale mais je voudrais que ces images défilent horizontalement voici le c problème affichage menu déroulant dans firefox et IE6 [ par victorian77 ] Bonjour, je suis en train de refonder un site en ajoutant un menu déroulantquand je survole une catégorie une liste d'items secondaires doit apparaîtr fonction conflit style [ par boscomac ] Bonjour, J'ai une fonction en javascript (avec la librairie JQuery) qui me permet lorsque je passe sur une Div d'animer la couleur du fond ainsi que


Nos sponsors


Sondage...

CalendriCode

Février 2012
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
272829    

Consulter la suite du CalendriCode

 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,499 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales