如何使用JavaScript更改按钮的背景图片？

Question

我想使用Javascript更改按钮的背景图像。 这是我目前正在尝试的方法，但是失败了。

HTML代码-

      <tr id="Rank1">
              <td><button class="darkSquare"></button></td>
               <td><button class="lightSquare" ></button></td>
                <td><button class="darkSquare" ></button></td>
               <td><button class="lightSquare" ></button></td>
                <td><button id="e1" class="darkSquare" ></button></td>
                <td><button class="lightSquare" ></button></td>
                <td><button class="darkSquare" ></button></td>
                <td><button class="lightSquare"> </button></td>
            </tr>

JavaScript代码

        initializer();

        function initializer()
         {
           var tableRow = document.getElementById("Rank1");

           var buttons = tableRow.getElementsByTagName("button");

           for(b in buttons)
            {
               console.log(b.toString());
               b.style.backgroundImage = "url('darkSquare.jpg')";
            }
         }

在控制台中，我收到一条错误消息，提示未定义b.style。

Answer 1

for (... in ...)循环在JavaScript中无法正常工作：

for (var b = 0; b < buttons.length; b++) {
    buttons[b].style.backgroundImage = "url('darkSquare.jpg')";
}

for (... in ...)实际上遍历对象的所有“成员”

例如。 在for(var m in x) console.log(m)使用var x = {a: 1, b: 2, c: 3}

> a
> b
> c

之所以使用数组，是因为它考虑了索引成员，如下所示：

var x = [1,2,3];
for (var m in x) console.log(m);
> 0
> 1
> 2

因为它为您提供索引，就像它们是成员一样，您无法区分。 陷阱是：

var x = [1,2,3];
x.stuff = 'boo!';
for (var m in x) console.log(m);
> 0
> 1
> 2
> stuff

一般经验法则 ：仅在迭代对象中的成员时for (... in ...) ，在使用数组时for (var i = 0; i < array.length; i++)

您可以随时作弊并使用 ：

for (var i = 0, item = x[i]; i < x.length; item=x[++i]) {
    // now item is the current item
}

Answer 2

您应该这样改变循环

for(var i = 0; i < buttons.length; i++)
{
   buttons[i].style.backgroundImage = "url('darkSquare.jpg')";
}​

您使用的循环在变量b中分配键。 由于您没有使用hasOwnProperty函数，因此此循环还可以生成您可能不需要的其他数据。

您也可以这样使用for-in循环

for(var b in buttons)
{
    if (buttons.hasOwnProperty(b))
        buttons[b].style.backgroundImage = "url('darkSquare.jpg')";
}​

Answer 3

当使用for ( ... in .... ) ，第一个参数是数组中的键，因此您必须像这样使用它：

for( b in buttons ) {
    buttons[b].style.backgroundImage = "url('darkSquare.jpg')";
}

jsFiddle中的工作示例