如何使用 JavaScript 更改按钮的背景图像？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9415851/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to change the background image of a button using JavaScript?
提问by CodeBlue
I want to change the background image of a button using Javascript. Here is what I am currently trying, but it is failing.
我想使用 Javascript 更改按钮的背景图像。这是我目前正在尝试的，但失败了。
HTML code -
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 Code
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')";
}
}
In the console, I get an error saying b.style is undefined.
在控制台中，我收到一条错误消息，说 b.style 未定义。
回答by ckozl
for (... in ...)loops do not work that way in JavaScript it should be:
for (... in ...)循环在 JavaScript 中不是这样工作的，它应该是：
for (var b = 0; b < buttons.length; b++) {
buttons[b].style.backgroundImage = "url('darkSquare.jpg')";
}
for (... in ...)actually iterates over all the "members" of an object
for (... in ...)实际上迭代对象的所有“成员”
eg. using var x = {a: 1, b: 2, c: 3}in for(var m in x) console.log(m)will produce
例如。使用var x = {a: 1, b: 2, c: 3}infor(var m in x) console.log(m)会产生
> a
> b
> c
it kind of works with arrays because it considers the indices members like this:
它有点适用于数组，因为它认为索引成员是这样的：
var x = [1,2,3];
for (var m in x) console.log(m);
> 0
> 1
> 2
since it is giving you the indices as if they were members you can't distinguish. the pitfall is:
因为它为您提供索引，就好像它们是您无法区分的成员一样。陷阱是：
var x = [1,2,3];
x.stuff = 'boo!';
for (var m in x) console.log(m);
> 0
> 1
> 2
> stuff
General Rule of Thumb: only use for (... in ...)when iterating over members in an object, use for (var i = 0; i < array.length; i++)when using arrays
一般经验法则：仅for (... in ...)在迭代对象中的成员for (var i = 0; i < array.length; i++)时使用，在使用数组时使用
you can always cheat and use:
你总是可以欺骗和使用：
for (var i = 0, item = x[i]; i < x.length; item=x[++i]) {
// now item is the current item
}
回答by Francis
You should change your loop as so
你应该改变你的循环
for(var i = 0; i < buttons.length; i++)
{
buttons[i].style.backgroundImage = "url('darkSquare.jpg')";
}?
The loop you used assign keys in a variable b. Since you didn't use the hasOwnProperty function, this loop can also yield other data you might not want.
您使用的循环在变量 b 中分配键。由于您没有使用 hasOwnProperty 函数，因此该循环还可以产生您可能不想要的其他数据。
You could also use the for-in loop as so
您也可以像这样使用 for-in 循环
for(var b in buttons)
{
if (buttons.hasOwnProperty(b))
buttons[b].style.backgroundImage = "url('darkSquare.jpg')";
}?
回答by Teneff
when using for ( ... in .... )the first parameter is the key in the array so you have to use it like this:
使用for ( ... in .... )第一个参数时是数组中的键，因此您必须像这样使用它：
for( b in buttons ) {
buttons[b].style.backgroundImage = "url('darkSquare.jpg')";
}
working example in jsFiddle
jsFiddle 中的工作示例
