我想改變div的背景onclick

-3

如何獲得點擊圖像的背景div？我新到javascript。我嘗試使用onclick，但代碼沒有工作。我希望可能是由於編程錯誤。我想改變div的背景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'); 
};

來源

2015-08-19 Anish Soni

添加相關代碼，HTML，CSS，JS等，無論你都試過了，對還是錯，請隨時與我們分享。 –

我想你應該試試'this.src'或'this.attr（'src'）'而不是'this（'src'）' –

。 –

-1

你能告訴我們一些代碼嗎？我會建議在你的項目中使用jQuery。用jQuery像這樣可以工作：

var imageSource = ""; 

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

來源

2015-08-19 11:02:22 kovogel

沒有jQuery標籤，也沒有足夠的信息來推導出現實/實用的解決方案。雖然我很欣賞你的幫助，但我不得不建議你跳得太快，並且認爲JavaScript === jQuery（常見）誤解。 –

@kovogel你在代碼的第二行有一個語法錯誤，在分號前缺少''' –

@DavidThomas我明白異議，但是在開始帖子中沒有共享代碼。我添加了一個解釋，說明我的示例需要使用jQuery。 – kovogel

-1

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

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

來源

2015-08-19 11:19:31

你是否通過演示？我相信你也在尋找同樣的東西。 –

在我的瀏覽器中不工作 –

我使用Internet Explorer –

改變你的代碼，這一點 -

<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 
};

來源

2015-08-19 11:22:50

你聲明的函數，但你沒有問它運行。試試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

來源

2015-08-19 11:25:14 chenghuayang

通行證this到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(this);"/></div> 
 
</div>

這就是你的JavaScript函數做什麼

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

而且這絕對應該工作！

來源

2015-08-19 12:08:53

你試過嗎？ –

1.您沒有添加Jquery 2.點擊圖片時，您正在調用「更改」方法，但必須更正方法名稱。

在下面的圖片查看紅色矩形的錯誤 -

來源

2015-08-19 14:48:09

OP不想使用jQuery。純JS。 – Jay

我想改變div的背景onclick

回答

相關問題