Question

我现在正在使用多个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

我要做的是使用一些if语句根据默认背景颜色的属性更改悬停颜色，以节省查找相应品牌颜色的时间和准确性。

if .spacetile(background-color) === #FFF
then .spacetile:hover(background-color) = #000

我想为一定数量的颜色做到这一点，所以我所要做的就是编写我想要特定图块的背景颜色，并使用脚本处理悬停背景。

我查看了getElementById，但后来我仍然使用多个ID而不是一个类，我读过的关于getElementsByClassName的所有内容都表明它不支持跨浏览器。

想知道是否有人对简单性和效率有任何建议。

谢谢！

Answer 1

使用常见的类。

<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>

使用 JQuery - JQuery Mouse Events

$(".space").mouseover(function(){

      if($(this).css('background-color')=='#FFF000')
      {
          $(this).css('background-color','#000FFF');
      }
      //else if else if and so on...
});

$(".space").mouseout(function(){

      if($(this).css('background-color')=='#FFF000')
      {
          $(this).css('background-color','#000FFF');
      }
      //else if else if and so on...
});

Answer 2

为什么不使用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>

Answer 3

问题建立在错误的假设之上。 getElementsByClassName是除IE<=8之外的所有内容的跨浏览器。请参阅http://caniuse.com/#feat=getelementsbyclassname（如果您需要支持IE<=8，可以伪造如下）：

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
      }
    }
  }
}

只需输入班级名称和（可选）标签名称（在您的情况下为“a”）。如果您没有提供标签名称，则默认为document.all，效率非常低。

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

3 个答案: