使用javascript选择背景样式-如何修复一个简单的语法错误？

我只想在单击按钮时更改背景。但是，我无法获取变量

change

来获取div

test2的背景并将其存储为变量。我之所以知道这一点，是因为发出警报时，
test2的值显示
undefined

我知道这似乎是一个简单的解决办法，但我实际上找不到解决办法。这只是一个简单的语法错误还是我遗漏了什么

如果您能解释一下为什么会发生这种情况，我们将不胜感激，谢谢


var el=document.getElementById（'test'）；
函数changeBG（）{
var change=document.getElementById（'test2'）.background；
el.style.background=更改；
}
#测试{
背景：url（'http://i.dailymail.co.uk/i/pix/2017/08/15/19/434758D400000578-4793442-image-a-5_1502822599189.jpg');
宽度：200px；
高度：200px；
背景尺寸：封面；
背景位置：中心；
}
#测试2{
背景：url（'https://upload.wikimedia.org/wikipedia/commons/thumb/4/44/Lioness_and_cub.jpg/240px-Lioness_and_cub.jpg');
}

您好
如果您想做的只是更改样式属性，那么只需切换类即可。除非您只是想学习一些东西，否则完全没有必要创建变量来实现这一点


var el=document.getElementById（'test'）；
函数changeBG（）{
el.classList.toggle（'test1'）；
el.classList.toggle（'test2'）；
}
#测试{
宽度：200px；
高度：200px；
背景尺寸：封面；
背景位置：中心；
}
.test1{
背景：url（'http://i.dailymail.co.uk/i/pix/2017/08/15/19/434758D400000578-4793442-image-a-5_1502822599189.jpg');
}
.test2{
背景：url（'https://upload.wikimedia.org/wikipedia/commons/thumb/4/44/Lioness_and_cub.jpg/240px-Lioness_and_cub.jpg');
}

更改背景
如果您只想更改样式属性，只需切换类即可。除非您只是想学习一些东西，否则完全没有必要创建变量来实现这一点


var el=document.getElementById（'test'）；
函数changeBG（）{
el.classList.toggle（'test1'）；
el.classList.toggle（'test2'）；
}
#测试{
宽度：200px；
高度：200px；
背景尺寸：封面；
背景位置：中心；
}
.test1{
背景：url（'http://i.dailymail.co.uk/i/pix/2017/08/15/19/434758D400000578-4793442-image-a-5_1502822599189.jpg');
}
.test2{
背景：url（'https://upload.wikimedia.org/wikipedia/commons/thumb/4/44/Lioness_and_cub.jpg/240px-Lioness_and_cub.jpg');
}

如果您正在寻找老派的解决方案，请更改背景


函数更改bg（）{
var el=document.getElementById（'test'）；
var值=null；
for（设i=0；i

#测试{
背景：url（'http://i.dailymail.co.uk/i/pix/2017/08/15/19/434758D400000578-4793442-image-a-5_1502822599189.jpg');
宽度：200px；
高度：200px；
背景尺寸：封面；
背景位置：中心；
}
#测试2{
背景：url（'https://upload.wikimedia.org/wikipedia/commons/thumb/4/44/Lioness_and_cub.jpg/240px-Lioness_and_cub.jpg');
宽度：200px；
高度：200px；
背景尺寸：封面；
背景位置：中心；
}
如果您正在寻找传统的解决方案
你好
如果您正在寻找一种老式的解决方案


函数更改bg（）{
var el=document.getElementById（'test'）；
var值=null；
for（设i=0；i

#测试{
背景：url（'http://i.dailymail.co.uk/i/pix/2017/08/15/19/434758D400000578-4793442-image-a-5_1502822599189.jpg');
宽度：200px；
高度：200px；
背景尺寸：封面；
背景位置：中心；
}
#测试2{
背景：url（'https://upload.wikimedia.org/wikipedia/commons/thumb/4/44/Lioness_and_cub.jpg/240px-Lioness_and_cub.jpg');
宽度：200px；
高度：200px；
背景尺寸：封面；
背景位置：中心；
}
如果您正在寻找传统的解决方案
你好
错误/未定义变量有几个原因。首先，html中没有id为“test2”的元素。您仅将css样式分配给id“test2”。只有id为“test”的div。另一个问题是HTML元素没有“background”属性。要更改背景，您需要使用document.getElementById（'test2'）.style.background=“url（…）”中的'style'属性

有几种方法可以解决这个问题，下面是一种使用类的方法


从div id中删除
background
属性并创建两个
课程，
background
和
background2
在html中，将
background
添加到
test
div作为默认值
类（背景图像）
使用
toggle（）
部门