2009-08-24 11 views
0

下記のHTMLコード(javascript付き)は、IE以外のすべてのブラウザで機能します。ExplorerのgetElementByIdに関するJSの問題

私は最近、IEがgetElementByIdとIDコードを処理したくないことを知りました。

誰かが私に助言してくれていますか、それを動作させる別の方法があるのか​​、回避コードがありますか?事前に

おかげで、エリック

<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

はい、ありがとう...問題解決済み。 –

答えて

0

<a>要素もname属性が必要ですか?

もしそうでなければ、ノイズがないことを減らす方がいいでしょう。

ただし、マークアップの詳細が何らかのフレームワーク(Struts、ASP.NET)によって生成されている可能性があります。また、名前属性を取得するかどうかを制御する機能がありませんか否か。

1

setAttribute()を使用して「クラス」を設定しようとしています。これは技術的に完全に有効ですが、IE has a bug with setAttribute()と設定されません。

IE

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

これは他のブラウザでは機能しなくなります。代わりにel.className = ...を使用してください。 – Quentin

2

el.removeAttribute( "クラス")のために使用するこれを、

これは動作しません。 IEのgetAttribute/setAttribute/removeAttributeを避けてください。正しくサポートされていません。バージョン8より前のIEでは、属性アクセスがJSオブジェクトのプロパティアクセスに混乱し、属性の名前が異なる場合(クラスvs className)、プロパティのタイプが異なる場合(ブール値または整数プロパティの場合は常に文字列)、混乱するエラーが発生します。

より良い(より読みやすく、クロスブラウザの互換性)DOM HTMLのプロパティを使用することです:

el.className= ''; 

<のhref = "#" ID = "index_100" 名前= "index_100"

a要素に 'id'の両方を使用する必要はありません 'name'それだけで 'id'を設定してください。

関連する問題