2009-08-24 13 views
0

Der HTML-Code (mit Javascript) unten funktioniert außer IE in allen Browsern angezeigt.JS Problem mit getElementById in Explorer

ich vor kurzem erfahren, dass IE will nicht den getElementById und ID-Codes zu behandeln.

Ist jemand so freundlich, mich zu beraten, gibt es eine andere Möglichkeit, es zu erhalten oder zu arbeiten, ist es eine Abhilfe Code?

Vielen Dank im Voraus, 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> 
+0

Ja, danke ... Problem gelöst. –

Antwort

0

Sie die <a> Elemente sogar einen Attributnamen müssen?

Wenn nicht, dann würden Sie wahrscheinlich besser sein, ohne sie, das ‚Rauschen‘ Faktor zu reduzieren.

Das Problem kann jedoch sein, dass die Finderdetails des Markups von einer Art Framework (Struts, ASP.NET) generiert werden - und Sie nicht steuern können, ob Sie ein Namensattribut erhalten oder nicht.

1

Sie versuchen setAttribute() zu verwenden, um die „Klasse“ zu setzen. Obwohl das technisch absolut gültig ist, IE has a bug with setAttribute() und wird das nicht einstellen.

Verwendung dieses für IE

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

Das wird für andere Browser brechen. Verwenden Sie stattdessen el.className = .... – Quentin

2

el.removeAttribute ("class");

, die nicht funktionieren. Vermeiden Sie getAttribute/setAttribute/removeAttribute in IE, sie werden nicht ordnungsgemäß unterstützt. IE vor Version 8 verwechselt den Attributzugriff mit JS-Objekteigenschaftenzugriff, was zu verwirrenden Fehlern führt, wenn das Attribut anders benannt wird (Klasse vs. Klassenname) oder der Typ der Eigenschaft unterschiedlich ist (boolesche oder Ganzzahleigenschaften, wobei ein Attribut immer eine Zeichenfolge ist).

besser (besser lesbar und Cross-Browser-kompatibel) ist die DOM HTML-Eigenschaften zu verwenden:

el.className= ''; 

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

Keine Notwendigkeit für beide 'ID' und 'Name' auf a-Elemente; setze 'id' einfach selbständig.