无法设置未定义的属性'background'

Question

当我运行下面的代码时，出现以下错误：

未

捕获的类型错误：无法设置未定义的属性"背景">

我做错了什么？

for(var n = 0; n < 5; n++) {
var heads='head'+n;
var image="images/"+heads+".jpg";
console.log(heads);                
document.getElementsByClassName('horse2').style.background="url("+image+")";
}

#results .horse1 { background-image: url(images/head1.png); }
#results .horse2 { background-image: url(images/head2.png); }
#results .horse3 { background-image: url(images/head3.png); }
#results .horse4 { background-image: url(images/head4.png); }

<table id="results">
<thead>
<tr>
<td>1st</td>
<td class="horse1"></td>
</tr>
<tr>
<td>1st</td>
<td class="horse2"></td>
</tr>
<tr>
<td>1st</td>
<td class="horse3"></td>
</tr>
</thead>
</table>

Answer 1

getElementsByClassName()方法返回文档中具有指定类名的所有元素的集合，作为 NodeList 对象。可以通过索引号访问节点。

你应该使用

document.getElementsByClassName('horse2')[0].style.background="url("+image+")";

Answer 2

document.getElementsByClassName('horse2')

这将返回一个元素数组。你应该使用

document.getElementsByClassName('horse2')[0].style.background="url('img-url')";

Answer 3

你应该知道getElementsByClassName选择器返回一个数组，所以你需要为它提供索引，将你的代码改为：

var el = document.getElementsByClassName('horse2')[0];
el.style.background = "url("+image+")";

Answer 4

Document.getElementsByClassName返回具有所有给定类名的所有子元素的类似数组的对象。

重要的是要注意两件事：

1. 类似数组的对象是具有length属性的常规对象，以及具有从 0 开始的连续数字名称的属性。除此之外，它没有普通数组的其他方法，尽管它有几个自己的方法。
2. Document.getElementsByClassName返回的类似数组的对象是一个"实时HTMLCollection"，这意味着随着元素的添加和删除，它们也会被添加到集合中或从集合中删除。

Document.getElementsByClassName永远不会单独返回单个元素，它将始终返回一个实时HTMLCollection。

您有几个选项(可能不提及细微的变化(：

1. 迭代集合(如果每个类只有一个元素，则不需要(：

   var collection = document.getElementsByClassName('horse2');
   for(var i = 0; i < collection.length; ++i) {
   collection[i].style.background = "url("+image+")";
   }
   

2. 如果只有一个元素，推荐的方法是使用 id 而不是类，然后使用document.getElementById，这将返回对具有所提供 ID 的单个元素的引用。

   document.getElementById('horse1').style.background = "url("+image+")";
   

3. 如果只有一个元素并且您需要使用类，但您不需要专门使用Document.getElementsByClassName，则可以改用Document.querySelector，它返回文档中与指定选择器或选择器组匹配的第一个Element。

   document.querySelectorAll('.horse1').style.background = "url("+image+")";
   

4. 如果只有一个元素并且必须使用Document.getElementsByClassName，则可以使用括号表示法选择集合中的第一个元素

   document.getElementsByClassName('horse1')[0].style.background = "url("+image+")";
   

   但是，如果集合中碰巧没有元素，则不会有第一个元素可供选择，并且您将再次收到相同的错误。