我想改变div onclick的背景

Question

如何将点击的图片作为div的背景？我是javascript的新手。我尝试使用onclick，但代码不起作用。我希望可能是由于编程错误。

<div id="canvas"></div>
<div id="containerA">
<div id="one" ><img src="https://stepupandlive.files.wordpress.com/2014/09/3d-animated-frog-image.jpg" id="image" onclick="change();"/></div>


function change(){
document.getElementById("image").style.backgroundImage = this('src');
};

Answer 1

将您的代码更改为此 -

<div id="canvas"></div>
<div id="containerA">
<div id="one" ><img src="https://stepupandlive.files.wordpress.com/2014/09/3d-animated-frog-image.jpg" id="image" onclick="change(this);"/></div> // passed this to the parameter


function change(obj){
document.getElementById("canvas").style.backgroundImage = obj.src; // here
};

Answer 2

您声明了一个功能，但您没有要求它运行。请尝试this或下面的代码段。此外，您可以分开代码以便控制好。

function changeImg() {
  document.getElementById("canvas").style.background = "url('//stephboreldesign.com/wp-content/uploads/2012/03/lorem-ipsum-logo.jpg')"
}

document.getElementById("canvas").onclick = changeImg;

#canvas { /* just for test, you can change by yourself */
  width: 325px;
  height: 325px;
  background: red;
}

<div id="canvas"></div>

here on JSBin是另一个版本，如果您想要更改两个或更多图像之间的背景。以下是一些参考资料，供您了解有关示例中使用的函数的更多信息。

W3C School - style change，W3C School - onclick event

MDN - style change，MDN - onclick event

Answer 3

将this传递给onclick这样的功能

＆＃13;

＆＃13;

<div id="canvas"></div>
 <div id="containerA">
 <div id="one" ><img src="https://stepupandlive.files.wordpress.com/2014/09/3d-animated-frog-image.jpg" id="image" onclick="change(this);"/></div>
</div> 

＆＃13;

＆＃13;

＆＃13; 这就是你在Javascript函数

中所做的

function change(img){
  var urlString = 'url(' + img.src + ')';
  document.getElementById("canvas").style.backgroundImage =urlString;
};

这绝对有效！

Answer 4

1.你没有添加Jquery 2.点击图片即可调用＆＃34;更改＆＃34;方法，但你必须更正方法名称。

在下图中检查红色矩形是否有错误 -

Answer 5

你能和我们分享一些代码吗？我建议在你的项目中使用jQuery。使用jQuery这样的东西可以工作：

var imageSource = "";

$("#img").click(function(){
   imageSource = $(this).attr("src");
   $('#canvas').css("background-image", "url("+imageSource+")");  
});

Answer 6

function changeImage(imgObj){
       bgImage = imgObj.src;
       $("#updateDiv").css('background-image','url('+bgImage+')');
 }

http://plnkr.co/edit/RL7T0a?p=preview