如何使用 JavaScript 更改按钮的背景图像？答案

【问题标题】：How to change the background image of a button using JavaScript?如何使用 JavaScript 更改按钮的背景图像？
【发布时间】：2012-02-23 15:21:55
【问题描述】：

我想使用 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 未定义。

【问题讨论】：

标签： javascript button background-image

【解决方案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
}

【讨论】：

是的。这行得通，但为什么 for in 循环不起作用？我在那里做错了什么？
哦。因此，在数组中，索引被视为成员。嗯。很有帮助。
for (var b in buttons) buttons[b].style... 但这并没有说明您认为它确实阅读了我上面编辑的评论^ 但它分解为for (... in ...) 不是像其他语言那样的迭代器（ java、c#等...)
因为我在x.stuff = 'boo!'; 行中将.stuff 作为一个expando 成员添加到Array 类型的对象中，记住所有JavaScript 对象都支持expando 属性。

【解决方案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')";
}

【讨论】：

【解决方案3】：

当使用for ( ... in .... )时，第一个参数是数组中的键，所以你必须像这样使用它：

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

jsFiddle 中的工作示例

【讨论】：