1

好吧,我觉得我的头很密集。但我似乎无法让它发挥作用。我正在为摄影师做一个网站,他希望能够让用户从 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>

4

4 回答 4

4

className不是styleDOM 元素中对象的一部分,而是直接属性:

document.getElementById("pictureframe").className = 'wooden';
于 2012-09-26T21:20:57.347 回答
2

它不是

pictureframe.style.className = ...

pictureframe.className = ...

演示

于 2012-09-26T21:21:58.033 回答
0

试试这个:

onclick ="pictureframe.className = 'wooden'"
于 2012-09-26T21:22:46.753 回答
0

如果您想使用其他一些样式类,则可能需要使用以下内容:

function replaceClass(className) {
    $('#pictureframe').removeClass('plain black wooden');
    return $('#pictureframe').addClass(className);
}​

这样你就可以保持课堂风格http://jsfiddle.net/NjTea/5/

于 2012-09-26T21:32:13.103 回答