Problème JS avec getElementById dans l'Explorateur

Le code html (avec javascript) montré ci-dessous fonctionne dans tous les navigateurs sauf IE.Problème JS avec getElementById dans l'Explorateur

J'ai récemment appris que IE ne voulait pas gérer les codes getElementById et id.

Est-ce que quelqu'un est si gentil pour me conseiller, y a-t-il une autre façon de le faire fonctionner ou y at-il un code de contournement?

Merci à l'avance, Erik

<html> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
<meta http-equiv="X-UA-Compatible" content="IE=8" /> 
<title>test</title> 
<script type="text/javascript"> 
<!-- 
var color = new Object(); 

color["100"] = new Array("300", "400"); 

color["200"] = new Array("100", "300", "400"); 

color["300"] = new Array("100", "200"); 

color["400"] = new Array("200"); 

var colors = new Array("related"); 

function on(id) 
{ 
for (var i=0; i<color[id].length; i++) 
{ 
var el = document.getElementById("index_"+color[id][i]); 
if (el) 
{ 
el.setAttribute("class", colors[i%1]); 
} 
} 
} 

function off(id) 
{ 
for (var i=0; i<color[id].length; i++) 
{ 
var el = document.getElementById("index_"+color[id][i]); 
if (el) 
{ 
el.removeAttribute("class"); 
} 
} 
} 
//--> 
</script> 

<style type="text/css"> 
<!-- 
body { 
font-family: Arial, Helvetica, sans-serif; 
font-size: 14px; 
line-height: 18px; 
color: #000000; 
text-decoration: none; 
} 
a:link, 
a:visited { 
color: #000000; 
text-decoration: none; 
} 

a:hover, 
a:active { 
color: #FF0000; 
text-decoration: underline; 
} 
a.related { 
color: #FF0000; 
text-decoration: none; 
} 
--> 
</style> 
</head> 

<body> 

<a href="#" id="index_100" name="index_100" onMouseOver="on(100)" onMouseOut="off(100)">aaa</a><br /> 
<br /> 
<a href="#" id="index_200" name="index_200" onMouseOver="on(200)" onMouseOut="off(200)">bbb</a><br /> 
<br /> 
<a href="#" id="index_300" name="index_300" onMouseOver="on(300)" onMouseOut="off(300)">ccc</a><br /> 
<br /> 
<a href="#" id="index_400" name="index_400" onMouseOver="on(400)" onMouseOut="off(400)">ddd</a> 

</body> 
</html>

Source

2009-08-24 Anonymous

Oui, merci ... problème résolu. –

Est-ce que les éléments <a> ont besoin même un attribut name?

Sinon, alors vous seriez probablement mieux sans eux, pour réduire le facteur «bruit». Le problème peut être, cependant, que les détails de recherche du balisage sont générés par une sorte de framework (Struts, ASP.NET) - et vous n'avez pas la possibilité de contrôler si vous obtenez un attribut de nom ou pas.

Source

2009-08-24 15:11:10 belugabob

vous essayez d'utiliser setAttribute() pour définir la "classe". Bien que cela soit techniquement totalement valide, IE has a bug with setAttribute() et ne le réglera pas.

utilisent ce pour IE

el.setAttribute("className", colors[i%1]);

Source

2009-08-24 15:29:51 scunliffe

Cela va casser pour les autres navigateurs. Utilisez el.className = ... à la place. – Quentin

el.removeAttribute ("classe");

Cela ne fonctionnera pas. Évitez getAttribute/setAttribute/removeAttribute dans IE, ils ne sont pas correctement pris en charge. IE avant la version 8 confond l'accès attribut avec l'accès aux propriétés de l'objet JS, entraînant des erreurs confuses lorsque l'attribut est nommé différemment (class vs className) ou le type de la propriété est différent (propriétés booléennes ou entières où un attribut est toujours string).

mieux (plus lisible et cross-browser compatible) est d'utiliser les propriétés DOM HTML:

el.className= '';

< a href = "#" id = "index_100" name = "index_100"

Pas besoin de 'id' et 'name' sur a-elements; il suffit de définir "id" seul.

Source

2009-08-24 15:44:10 bobince

Problème JS avec getElementById dans l'Explorateur

Répondre

Questions connexes