Javascript 如何更改多个元素的样式？_Javascript_Css_Dom

Javascript 如何更改多个元素的样式？

javascript css dom

Javascript 如何更改多个元素的样式？,javascript,css,dom,Javascript,Css,Dom,我有十张马的拇指照片。每次点击一匹马，我都希望它的背景变成灰色。同样，当另一匹马被点击时，我希望那匹马的背景颜色变成灰色，所有其他的背景都变成白色如果我这样做 function changeBackHorse(id) { for (var i = 0; i < 25; i++) { if (id == i) { document.getElementById("horseThumb_" + id) .style.backgroundColor = '#

我有十张马的拇指照片。每次点击一匹马，我都希望它的背景变成灰色。同样，当另一匹马被点击时，我希望那匹马的背景颜色变成灰色，所有其他的背景都变成白色

如果我这样做

function changeBackHorse(id) {
  for (var i = 0; i < 25; i++) {
   if (id == i) { 
     document.getElementById("horseThumb_" + id)
       .style.backgroundColor = '#888';
   }
  }
}

功能转换木马（id）{
对于（变量i=0；i<25；i++）{
如果（id==i）{
document.getElementById（“horsemthumb_3;”+id）
.style.backgroundColor='#888'；
}
}
}

单击的马的背景会发生变化。我现在要做的就是添加一个else语句，这样当ID不相同时，背景就会变成白色

所以我想我认为这会奏效，但不知道为什么不行。虽然传递的ID是正确的，但什么也没有发生。（使用警报（id）进行测试）

脚本：

function changeBackHorse(id) {
  for (var i = 0; i < 25 ; i++) {
   var el = document.getElementById("horseThumb_" + i);
   if (id == i){
    el.style.backgroundColor = '#888';
   } else {
    el.style.backgroundColor = '#fff';
   }
  }
}

功能转换木马（id）{
对于（变量i=0；i<25；i++）{
var el=document.getElementById（“horsemthumb_u3;”+i）；
如果（id==i）{
el.style.backgroundColor='#888'；
}否则{
el.style.backgroundColor='#fff'；
}
}
}

我不知道我做错了什么。我试着用各种方法来改变它，但不明白为什么它不起作用。因此，任何答案都将不胜感激

确认脚本运行时没有抛出任何错误吗？我怀疑以下说法：

for (i;i<25;i++) { ...

对于（i；i；i）您能否显示浏览器收到的实际标记（而不是用于打印这些跨距的服务器端功能）？sth…等等。可能问题在于horsemthumb_xx元素并不总是存在的？因此我在chrome中的js抛出了一个错误：无法读取null的属性“style”。但这是因为horsemthumb的数量会发生变化，并不总是都存在。但我认为这不应该停止“for”函数停止循环？是的，就是这样。我不知道如果元素不存在，错误将停止函数的工作。谢谢。问题是，是的，因为我的函数试图更改一些不存在的元素的背景颜色。因此没有完成。我不想智能：）。编辑：虽然我不确定为什么在没有其他语句的情况下它能工作（它改变了背景色）？即使在这种情况下也应该有错误。@necker with else总是进入“else”语句，任何试图访问“el.style”的语句，其中el将为“null”。如果您删除'else'语句，它只会在id匹配的情况下进入并访问'el'。
for (i;i<25;i++) { ...

<html>
<head>
<script>
function changeBackHorse(id){
  var i=0;
  for (i;i<5;i++) {
   if (id == i){
    document.getElementById("horseThumb_"+id).style.backgroundColor='#888'
   }
   else{
    document.getElementById("horseThumb_"+i).style.backgroundColor='#fff'

   }
  }
}
window.onload = function() {
 changeBackHorse(1);
}
</script>
</head>
<body>
<div id="horseThumb_0">horse 0</div>
<div id="horseThumb_1">horse 1</div>
<div id="horseThumb_2">horse 2</div>
<div id="horseThumb_3">horse 3</div>
<div id="horseThumb_4">horse 4</div>
</body>
</html>