更改链接颜色在 IE 中不起作用

Question

我有这段 JavaScript 代码，它为最近点击的链接设置背景颜色：

<script>
function changeClass(Index) {
    var ids = new Array(
        "null", "homenav", "coffeenav", "sidenav", "standnav",
        "dinnernav", "stoolsnav", "pedestalsnav",
        "galleriesnav", "pressnav", "factsnav", "contactnav"
    );
    var color = new Array(
        "null", "#c9a900", "#f32837", "#0085cf",
        "#00aa86", "#c99900", "c42695", "#617f90",
        "#4814a9","#71a28a","#ac27a9","#998f86"
    );
    var i = 1;
    var length = ids.length;
    while (i < length) {
        document.getElementById(ids[i]).style.backgroundColor = '#FFF';
        document.getElementById(ids[i]).setAttribute("class","blacklink");
        document.getElementById(ids[Index]).style.backgroundColor =color[Index];
        document.getElementById(ids[Index]).setAttribute("class","whitelink");
        i++;
    }
}
</script>

而且我还有一张这样的表：

<table width="100%" border="0" align="left" cellpadding="3" cellspacing="3" class="menyrad">
 <tr valign="middle" align="center">
  <td width="10%" id="homenav">
    <a href="framsida_test.html" onClick="changeClass(1)">Furniture home</a>
 </td>
 <td width="10%" id="coffeenav">
  <a href="coffee.html" onClick="changeClass(2)">Coffee tables</a>
 </td>
 <td width="9%" id="sidenav">
  <a href="side.html" onClick="changeClass(3)">Side tables</a>
 </td>
 <td width="9%" id="standnav">
  <a href="stand.html" onClick="changeClass(4)">Stand tables</a>
 </td>
 <td width="8%" id="dinnernav">
  <a href="dinner.html" onClick="changeClass(5)">Dinner tables</a>
 </td>
 <td width="6%" id="stoolsnav">
  <a href="stools.html" onClick="changeClass(6)">Stools</a>
 </td>
 <td width="8%" id="pedestalsnav">
  <a href="pedestals.html" onClick="changeClass(7)">Pedestals</a>
 </td>
 <td width="8%" id="galleriesnav">
  <a href="galleries.html" onClick="changeClass(8)">Galleries</a>
 </td>
 <td width="6%" id="pressnav">
  <a href="press.html" onClick="changeClass(9)">Press</a>
 </td>
 <td width="6%" id="factsnav">
  <a href="facts.html" onClick="changeClass(10)">Facts</a>
 </td>
 <td width="8%" id="contactnav">
  <a href="contact.php" onClick="changeClass(11)">Contact</a>
 </td>

class="menyrad"、class="whitelink" 和 class ="blacklink" 的 CSS 如下所示：

.menyrad td {
  font-family:Verdana, Geneva, sans-serif;
  font-size:10px;
}

.whitelink {
  color:#fff;
  outline:0;
  font-weight:bold;
}

.blacklink a {
  color:#000;
  outline:0;
}

这在所有浏览器中都可以正常工作，但 Internet Explorer （我检查过 IE9，但似乎在任何版本中都不起作用）。当我按下任何链接时，链接周围会出现一块颜色，文本变为粗体白色，并且按下的链接周围没有虚线轮廓。在 IE 中会出现彩色块，但文本是黑色且不粗体，并且有一个轮廓。

我能做什么？

Answer 1

旧版本的 Internet Explorer（以及处于 Quirks/Compatibility 模式的现代版本）的 setAttribute 实现已损坏。不要使用它。改为设置关联的 DOM 属性。

element.className = "foo";

Answer 2

尝试使用以下 CSS：

.blacklink a,
.blacklink a:link,
.blacklink a:visited
{
    color:#000;
    outline:0;
}