在循环中更改背景图像

Question

对我来说，这看起来像一个简单的想法 - 当您单击一个div时，该div的背景图像会发生变化。到目前为止，我已经尝试了这种颜色（将颜色名称放在数组中，将“box.style.backgroundImage”更改为“box.style.backgroundColor”） 它可以很好地处理颜色，但不适用于图像。任何想法为什么？

的Javascript：

var box = document.getElementById('box'), 
imgs = ['/image.jpg', '/image2.jpg']; 

box.onclick = function() { 
img = imgs.shift(); 
imgs.push(img); 

box.style.backgroundImage = img; 
}; 

HTML：

<div id='box'></div> 

CSS：

#box { 
background: url("https://priteshgupta.com/wp-content/uploads/2011/06/html-ipsum.png"); 
width:200px; 
height:200px; 
margin:50px; 
} 

Answer 1

你仍然需要url("...")：

box.style.backgroundImage = 'url("' + img + '")'; 

Answer 2

的CSS 背景图像属性需要的URL 'URL（...）' 括起来：

box.style.backgroundImage = 'url(' + img + ')';