SetAttribute ne fonctionne pas dans IE6

(La plupart des éléments ci-dessous étaient avant que l'OP ne clarifiait qu'ils mettaient un gestionnaire d'événements, laissait la liste des autres problèmes au cas où d'autres les trouveraient utiles)

IE6 fait un setAttribute de plusieurs aspects de setAttribute . Sans connaître le problème exact avec lequel vous étiez confronté ( ceci avant que l'éditeur ne soit identifié, il s'agissait d'un gestionnaire d'événements ), il est difficile d'être sûr que ce soit vraiment le problème, mais voici quelques problèmes connus:

Vous ne pouvez pas utiliser setAttribute pour configurer les gestionnaires d'événements

Il est préférable de définir les gestionnaires d'événements à l'aide de la propriété réfléchie ou avec addEventListener [standard] / attachEvent [IE], pas setAttribute (et vous ne pouvez pas utiliser setAttribute sur IE).

Ainsi, l'un de ces travaux fonctionnera:

 // Using reflected property theElement.onclick = yourFunction; // Using DOM2 standard addEventListener; note it's "click", not "onclick" theElement.addEventListener("click", yourFunction, false); // IE's non-standard alternative to addEventListener theElement.attachEvent("onclick", yourFunction); 

…ne pas

 // This doesn't work on IE (at least) theElement.setAttribute("onclick", "yourFunction();"); 

La manière de faire addEventListener / attachEvent est cool pour d'autres raisons: Vous pouvez avoir plusieurs auditeurs d'événements sur le même événement d'un élément. Vous ne pouvez pas le faire en utilisant la propriété reflétée.

Donc, pour votre situation spécifique:

 menuItems = document.getElementById("menu").childNodes; for (i = 0; i < menuItems.length; i++) { if (menuItems[i].className != "blue") { menuItems[i].onmouseover = function() { HoverMenu(this); } } } 

Certains attributs ont besoin de leurs noms modifiés

class

La manière correcte de définir l'attribut de classe est d'utiliser la propriété réfléchie className :

 // Correct, cross-browser way. Works on IE6+, all versions of // Chrome, etc. Completely reliable. theElement.className = "new set of classes"; 

Ou sur les navigateurs modernes (donc, pas IE6!), Vous pouvez utiliser classList .

L'un des nombreux bugs setAttribute d'IE6 est que cela ne fonctionne pas:

 // Should also work, but fails on IE6 (and probably some other old versions) theElement.setAttribute("class", "new set of classes"); 

Au lieu de cela, IE6 (et probablement quelques autres versions) vous permet d'utiliser "className" au lieu de "class" , même si cela n'a aucun sens. La propriété réfléchie a le nom className car il était en JavaScript, vous ne pouviez pas utiliser les mots réservés (comme class ou for ou if ) en tant que littérature de propriété ( obj.class était invalide). Ce n'est pas vrai depuis un certain temps maintenant (ECMAScript 5 l'a réparé), mais c'est pourquoi la propriété reflétée est className , pas de class.

Mais puisque setAttribute prend une chaîne , il doit accepter le nom propre de l'attribut. Le fait qu'il ne soit pas seulement un bug IE (et celui qu'ils ont corrigé dans les versions modernes d'IE s'ils ne sont pas dans le mode de compatibilité [in]).

for

De même, pour définir l'attribut for (par exemple, sur l' label s), on utilise la propriété htmlFor réfléchie:

 // Correct, cross-browser way. Works on IE6+, all versions of // Chrome, etc. Completely reliable. theLabel.htmlFor = "id-of-field"; 

Sur tout navigateur non cassé, vous pouvez également utiliser setAttribute :

 // Should also work, but fails on IE6 (and probably some other old versions) theLabel.setAttribute("for", "id-of-field"); 

… mais pas sur IE6, il veut "htmlFor" au lieu de "for" pour la même raison qu'il veut "className" plutôt que "class" (par exemple, parce qu'il est cassé).

Cette page contient une liste d'attributs problématiques avec IE.

setAttribute ne peut pas être utilisé pour définir l'attribut de style

… il faut utiliser la propriété style place; Mais pour être juste, c'est généralement un moyen plus pratique. Exemple: cela ne fonctionnera pas sur IE:

 theElement.setAttribute("style", "color: blue"); // Doesn't work on IE 

… mais cela va:

 myElement.style.color = "blue"; 

Légèrement OT: regardez les bibliothèques

Les bibliothèques JavaScript comme Prototype , jQuery , Closure ou l' une de plusieurs d'entre elles rendront la plus grande partie plus facile et faciliteront les différences entre les navigateurs si vous passez leurs API.

Je voudrais vraiment regarder jquery. Il a toutes les fonctionnalités qui fonctionnent avec IE6 et ce serait beaucoup plus facile que le code que vous avez ici. Il ressemblerait à ceci:

 menuItems = $("#menu")[0].childNodes; $.each(menuItems, function() { var item = $(this); if (item.attr("className") != "blue") item.mouseover(HoverMenu); } 

Ce code pourrait être modifié quelque peu comme je l'ai simplement écrit de la mémoire.

Je dis plus facile parce que ce que vous essayez de faire lors de la création d'événements comme celui-ci, varie en fonction du navigateur et peut causer la mal à la configuration. Mais avec jquery, tout est fait pour vous.