Question

当我运行下面的代码时，我收到以下错误：

未捕获的TypeError：无法设置属性＆＃39; background＆＃39;未定义的

我做错了什么？

＆＃13;

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+")";
}

＆＃13;

#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); }

＆＃13;

<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>

＆＃13;

Answer 1

document.getElementsByClassName('horse2')这将返回一个元素数组。你应该使用

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

Answer 2

您应该知道getElementsByClassName选择器返回一个数组，因此您需要为它提供索引，将代码更改为：

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

Answer 3

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

你应该使用

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

Answer 4

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

重要的是要注意两件事：

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

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

你有几个选择（可能不会提到微小的变化）：

迭代集合（如果每个类只有一个元素，则不必要）：

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

如果只有一个元素，推荐的方法是使用id而不是类，然后使用document.getElementById，它返回对具有提供的ID的单个元素的引用。 / p>
```
document.getElementById('horse1').style.background = "url("+image+")";
```
如果只有一个元素而你需要使用类，但你不需要专门使用Document.getElementsByClassName，你可以使用Document.querySelector，它返回第一个文档中的Element与指定的选择器或选择器组匹配。
```
document.querySelectorAll('.horse1').style.background = "url("+image+")";
```
如果只有一个元素且您必须使用Document.getElementsByClassName，则可以使用bracket notation选择集合中的第一个元素
```
document.getElementsByClassName('horse1')[0].style.background = "url("+image+")";
```
但是，如果集合中没有任何元素，则不会选择第一个元素，并且您将再次收到相同的错误。

无法设置属性＆＃39;背景＆＃39;未定义的

4 个答案: