[英]Change a background image of a div on click
好吧,我想我的頭很密。 但我似乎無法使它正常工作。 我正在為攝影師創建一個網站,他希望能夠讓用戶從3的選擇中更改他們想要的框架。我認為最簡單的方法是創建一個div,然后使用它通過單擊按鈕更改類。 因此它將改變背景圖像。 但是我無法做到這一點。 任何想法都會受到歡迎,因為我猜可能會有一個javascript版本,它可以更快,更輕松地完成它。
<html>
<head>
<title>Untitled</title>
<style>
#pictureframe {
width:200px;
height:200px;
}
.wooden {
background-image:url(frame.png);
}
.plain {
background-image:url(clear.png);
}
.black {
background-image:url(black.png);
}
</style>
</head>
<body>
<div id="pictureframe">
</div>
<div style="height:20px;border:1px solid #617779;width:90px;text-align:center;background-color:white;" onclick = "pictureframe.style.className = 'wooden'">Make it wood</div>
<br>
<div style="height:20px;border:1px solid #617779;width:90px;text-align:center;background-color:white;" onclick = "pictureframe.style.className = 'clear'">Make it Frameless</div>
<br>
<div style="height:20px;border:1px solid #617779;width:90px;text-align:center;background-color:white;" onclick = "pictureframe.style.className = 'wooden'">Make it Black Bezel</div>
</body>
className
不是DOM元素中style
對象的一部分,而是直接屬性:
document.getElementById("pictureframe").className = 'wooden';
嘗試這個:
onclick ="pictureframe.className = 'wooden'"
如果您想使用其他類作為樣式,則可能需要執行以下操作:
function replaceClass(className) {
$('#pictureframe').removeClass('plain black wooden');
return $('#pictureframe').addClass(className);
}
這樣,您可以使用樣式http://jsfiddle.net/NjTea/5/
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.