2009-08-24 1 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> 요소도 이름 속성이 필요하십니까?

그렇지 않은 경우 '노이즈'요인을 줄이면 더 좋을 것입니다.

그러나 마크 업의 세부 정보가 일종의 프레임 워크 (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 객체 속성 액세스와 혼동되어 속성 이름이 다르게 (클래스 대 className) 또는 속성 유형이 다른 경우 (속성이 항상 문자열 인 부울 또는 정수 속성) 혼란스러운 오류가 발생합니다.

는 (더 읽기 및 크로스 브라우저 호환)

더 나은는 DOM HTML 속성을 사용하는 것입니다 :

el.className= ''; 

< A HREF를 = "#"ID = "index_100"이름 = "index_100"

a 요소에서 'id'가 모두 일 필요는 없습니다. 그저 'id'를 설정하십시오.