资源管理器中 getElementById 的 JS 问题
下面显示的 html 代码（带有 JavaScript）适用于除 IE 之外的所有浏览器。
我最近了解到 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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
那是行不通的。避免在 IE 中使用 getAttribute/setAttribute/removeAttribute，它们没有得到正确支持。 8 版本之前的 IE 将属性访问与 JS 对象属性访问混淆，当属性命名不同（class 与 className）或属性类型不同（属性始终为字符串的布尔或整数属性）时，会导致混淆错误。
更好（更具可读性和跨浏览器兼容性）是使用 DOM HTML 属性：
a 元素上不需要同时使用 'id' 和 'name'；只需自行设置“id”即可。
That won't work. Avoid getAttribute/setAttribute/removeAttribute in IE, they aren't properly supported. IE before version 8 confuses attribute access with JS object property access, resulting in confusing errors when the attribute is named differently (class vs className) or the type of the property is different (boolean or integer properties where an attribute is always string).
Better (more readable and cross-browser compatible) is to use the DOM HTML properties:
No need for both ‘id’ and ‘name’ on a-elements; just set ‘id’ on its own.
您正在尝试使用 setAttribute() 来设置“类”。尽管这在技术上是完全有效的，IE 有一个setAttribute() 的错误并且不会设置它。
将其用于 IE
you are trying to use setAttribute() to set the "class". Although that is technically totally valid, IE has a bug with setAttribute() and won't set that.
use this for IE
元素是否还需要 name 属性？如果没有，那么没有它们可能会更好，以减少“噪音”因素。
然而，问题可能在于，标记的查找器详细信息是由某种框架（Struts、ASP.NET）生成的，并且您无法控制是否获取名称属性。
Do the
<a>elements even need a name attribute?If not, then you would probably be better of without them, to reduce the 'noise' factor.
The problem may be, however, that the finder details of the markup is being generated by some kind of framework (Struts, ASP.NET) - and you don't have the ability to control whether you get a name attribute or not.