Question

无法设置未定义的属性“background”

2017-07-21

10277

javascript

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

Uncaught TypeError: Cannot set property 'background' of undefined

我做错了什么？

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