设置javascript函数的背景图像Onclick

Question

我想将div1的背景图像设置为已单击的图像。

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

<div id="div1"></div>
 <div id="div2">
 <div id="div3" ><img src="myurl" id="image" onclick="change();"/></div>
</div> 

上面的Js函数没有这样做。

Answer 1

更改html onclick函数调用以将this作为参数传递给函数，并将JS代码更改为以下

<div id="div1"></div>
 <div id="div2">
 <div id="div3" ><img src="myurl" id="image" onclick="change(this);"/></div>
</div>

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

Answer 2

为div（宽度和高度）添加尺寸以查看更改。

function change(src){
  
  document.getElementById("div1").style.backgroundImage ='url(' + src + ')';
};

<div id="div1" style="width:100%; height:500px;"></div>
 <div id="div2">
 <div id="div3" ><img src="http://www.gettyimages.co.uk/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg" id="image" onclick="change(this.src);"/></div>
</div> 

Answer 3

通过将var myBody = world.CreateBody(bodyDef2); var myFixture = mybody.CreateFixture(fixDef2); // Apply force to object myBody.ApplyForce(new b2Vec2(500,50), myBody.GetWorldCenter()); 传递给更改来尝试以下操作。然后，您可以正确引用图像URL。

this

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