Javascript 无法设置属性';背景';未定义的

Javascript 无法设置属性';背景';未定义的,javascript,Javascript,运行下面的代码时,出现以下错误: 未捕获的TypeError:无法设置未定义的属性“background” 我做错了什么 for(变量n=0;n

运行下面的代码时,出现以下错误:

未捕获的TypeError:无法设置未定义的属性“background”

我做错了什么

for(变量n=0;n<5;n++){
var heads='head'+n;
var image=“images/”+heads+“.jpg”;
控制台日志(头);
document.getElementsByClassName('horse2').style.background=“url(“+image+”);
}
#results.horse1{背景图像:url(images/head1.png);}
#results.horse2{背景图像:url(images/head2.png);}
#results.horse3{背景图像:url(images/head3.png);}
#results.horse4{背景图像:url(images/head4.png);}

第一
第一
第一

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

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

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

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

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

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

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

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

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

你应该使用

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

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

你应该使用

document.getElementsByClassName('horse2')[0].style.background="url("+image+")";
返回具有所有给定类名的所有子元素的类数组对象

必须注意两件事:

  • 类似数组的对象是具有
    length
    属性的常规对象,以及具有从0开始的连续数字名称的属性。除此之外,它没有普通数组的其他方法,尽管它有自己的一些方法
  • Document.getElementsByClassName
    返回的类似数组的对象是“活动”的,这意味着随着元素从DOM中添加和删除,它们也将添加到集合中或从集合中删除
  • Document.getElementsByClassName
    不会单独返回单个元素,它将始终返回一个活动的
    HTMLCollection

    您有几个选择(可能未提及细微变化):

  • 迭代集合(如果每个类只有一个元素,则不需要):

  • 如果只有一个元素,您需要使用类,但不需要使用
    Document.getElementsByClassName
    ,具体来说,您可以使用,它返回文档中与指定选择器或选择器组匹配的第一个元素

    document.querySelectorAll('.horse1').style.background = "url("+image+")";
    
  • 如果只有一个元素,并且必须使用
    Document.getElementsByClassName
    ,则可以使用来选择集合中的第一个元素

    document.getElementsByClassName('horse1')[0].style.background = "url("+image+")";
    
    但是,如果集合中碰巧没有元素,那么将没有第一个要选择的元素,并且您将再次遇到相同的错误

  • 返回具有所有给定类名的所有子元素的类数组对象

    必须注意两件事:

  • 类似数组的对象是具有
    length
    属性的常规对象,以及具有从0开始的连续数字名称的属性。除此之外,它没有普通数组的其他方法,尽管它有自己的一些方法
  • Document.getElementsByClassName
    返回的类似数组的对象是“活动”的,这意味着随着元素从DOM中添加和删除,它们也将添加到集合中或从集合中删除
  • Document.getElementsByClassName
    不会单独返回单个元素,它将始终返回一个活动的
    HTMLCollection

    您有几个选择(可能未提及细微变化):

  • 迭代集合(如果每个类只有一个元素,则不需要):

  • 如果只有一个元素,您需要使用类,但不需要使用
    Document.getElementsByClassName
    ,具体来说,您可以使用,它返回文档中与指定选择器或选择器组匹配的第一个元素

    document.querySelectorAll('.horse1').style.background = "url("+image+")";
    
  • 如果只有一个元素,并且必须使用
    Document.getElementsByClassName
    ,则可以使用来选择集合中的第一个元素

    document.getElementsByClassName('horse1')[0].style.background = "url("+image+")";
    
    但是,如果集合中碰巧没有元素,那么将没有第一个要选择的元素,并且您将再次遇到相同的错误


  • 你的第四要素在哪里?你的第四要素在哪里?