Gestion des attributs – IE vs FF

Un nouvel exercice m'a permis de trouver de nouvelles différences entre Internet Explorer et Firefox (et je pense les autres navigateurs aussi)

Il s'agissait de modifier le style d'un élément, jusque là rien de difficile me direz vous. Faux

Premièrement, il a fallu récupérer l'élément où je voulais modifier le style (en fait je modifie l'élément suivant). Cet élément est le tag <label> et ce qui permet de le différencier c'est l'attribut for ce qui nous donne quelque chose de la forme :

<label for="IEvsFF">

Pour cela, en javascript, je faisais quelque chose comme :

var labels = document.getElementsByTagName("label");
for(var i = 0; i < labels.length; i++){ if( labels[i].getAttribute("for") == "IEvsFF"){ .... // Mon traitement } }

Ce qui passe bien sur Firefox. Cependant le résultat n'est pas le même sur Internet Explorer, en fait je n'ai rien même pas un message d'erreur. Aïe, aïe.

Après un debug, je m'aperçois que l'attribut s'appelle htmlFor. Du coup, ça marche mieux ! Et donc mon code devient quelque chose du genre :

var labels = document.getElementsByTagName("label");
for(var i = 0; i < labels.length; i++){ if (typeof ActiveXObject != "undefined") { if(labels[i].getAttribute("htmlFor") == "IEvsFF"){ .... // Mon traitement } } else{ if(labels[i].getAttribute("for") == "IEvsFF"){ .... // Mon traitement } } }

Merci l'alourdissement et l'imbrication des if.

Bon j'ai récupéré mon élément, maintenant je vais modifier son style tout simplement de la manière suivante :

myElement.setAttribute('class', 'topinambour');

Sous Firefox, pas de soucis tout marche bien. Par contre IE rien du tout, il modifie bien l'attribut dans le DOM (vérifié sur Firebug lite) mais il n'a pas l'air de modifier les couleurs.

Après quelques recherches, je tombe sur le fait qu'Internet Explorer ne gère pas l'attribut class de la même manière que les autres navigateurs. Voici ce qu'il faut à la place :

myElement.setAttribute('className', 'topinambour');

Et il faut donc modifier le code en conséquence de la même manière que précédemment.

Super !

Donc encore une fois, il faut rajouter plein de code pour gérer le fait qu'Internet Explorer ne gère pas le DOM de la même manière que les autres navigateurs ce qui alourdit la travail des développeurs que nous sommes.

Pour d'autres subtilités je vous conseille la lecture de l'article suivant : http://www.impressivewebs.com/7-javascript-differences-between-firefox-ie/

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Captcha *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.