使用JavaScript更改多个元素悬停背景颜色？

我现在已经使用了多个ID，并为每个ID设置了CSS属性。我宁愿它是自动的。所有链接都显示为块，并彼此相邻浮动以创建平铺外观。例如：

<a href="#" id="spacetile1">Link 1</a>
<a href="#" id="spacetile2">Link 2</a>
<a href="#" id="spacetile3">Link 3</a>
<a href="#" id="spacetile4">Link 4</a>

#spacetile1 {
background-color:#FFF;}

#spacetile1:hover {
background-color:#000;} .... so on and so forth for all spacetiles

我想为一定数量的颜色做这件事，所以我所要做的就是编码我想要的特定瓷砖的背景色，悬停背景将与脚本一起处理

我已经研究了getElementById，但是我仍然使用多个ID，而不是一个类，而且我读到的关于GetElementsByCassName的所有信息都表明跨浏览器不支持它

我想知道是否有人对简单性和效率有什么建议

---

谢谢

为什么不使用CSS类：

<a href="#" id="spacetile1" class="spacetile">...</a>
<a href="#" id="spacetile2" class="spacetile">...</a>

<style>
.spacetile { background-color: #FFF; }
.spacetile:hover { background-color: #000; }
</style>

.spacetile{背景色：#FFF；}
.spacetile:hover{背景色：#000；}

为什么不使用CSS类：

<a href="#" id="spacetile1" class="spacetile">...</a>
<a href="#" id="spacetile2" class="spacetile">...</a>

<style>
.spacetile { background-color: #FFF; }
.spacetile:hover { background-color: #000; }
</style>

.spacetile{背景色：#FFF；}
.spacetile:hover{背景色：#000；}

使用一个通用的类

<a href="#" id="spacetile1" class="space">Link 1</a>
<a href="#" id="spacetile2" class="space">Link 2</a>
<a href="#" id="spacetile3" class="space">Link 3</a>
<a href="#" id="spacetile4" class="space">Link 4</a>

---

使用公共类

<a href="#" id="spacetile1" class="space">Link 1</a>
<a href="#" id="spacetile2" class="space">Link 2</a>
<a href="#" id="spacetile3" class="space">Link 3</a>
<a href="#" id="spacetile4" class="space">Link 4</a>

---

---

这个问题是建立在错误的假设之上的

getElementsByClassName

是跨浏览器的，除了

IE这个问题建立在错误的假设之上
getElementsByClassName
是跨浏览器的，除了
IE
id
应该是唯一的，停止读取。为了简单和高效，以及跨浏览器选择器，请使用库。jQuery是最常见的。
id
应该是唯一的，已停止读取。为了简单和高效，以及跨浏览器选择器，请使用库。jQuery是最常见的。大约有12种不同的颜色组合，这就是为什么我希望用一个脚本来简化它。@Keith使用脚本而不是css可能会让你的生活更轻松，但不会让你的用户体验更好。这就是我目前正在做的，只是在寻找另一个解决方案。不太熟悉上面提到的jQuery，但我会研究一下@Christophe，我想看看页面加载时间和体验的不同。这是内联网上的一个非常小的页面，所以我并不真正担心这一部分。只是试验和尝试其他解决方案，以找出什么不仅对我最有效，而且对我的用户最有效。实验！jQuery？更糟；-）请回答您的上述评论：页面越小，脚本解决方案对性能的影响就越大。大约有12种不同的颜色组合，这就是为什么我希望用一个脚本来简化这个问题。@Keith使用脚本而不是css可能会让您的生活更轻松，但这不会让你的用户体验更好。这就是我目前正在做的，只是在寻找另一个解决方案。不太熟悉上面提到的jQuery，但我会研究一下@Christophe，我想看看页面加载时间和体验的不同。这是内联网上的一个非常小的页面，所以我并不真正担心这一部分。只是试验和尝试其他解决方案，以找出什么不仅对我最有效，而且对我的用户最有效。实验！jQuery？更糟；-）请回答您的上述评论：页面越小，脚本解决方案对性能的影响就越大。阿里，感谢您的回复。我会尝试类似的方法，看看它如何影响我的页面速度，等等。阿里，谢谢你的回复。我将尝试类似的方法，看看它如何影响我的页面速度，等等。是的，不幸的是，我的组织中仍有用户使用IE6，所以我确实需要支持这些浏览器。不过，感谢您提供了伪装的解决方案。是的，不幸的是，我的组织中仍有用户使用IE6，因此我确实需要支持这些浏览器。谢谢你的解决方案，但假装它。
function compatGetElementsByClassName(class, tag) {
  if (document.getElementsByClassName) {
    //Use native version
    return document.getElementsByClassName(class);
  } else {
    //Fake it
    i = 0;
    subset = (typeof tag !== 'undefined')?document.getElementsByTagName(tag):document.all;
    while (element = subset[i++]) {
      if (element.className == class) {
        //your code here
      }
    }
  }
}