Question

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

Answer 1

className不是DOM元素中style对象的一部分，而是直接属性：

document.getElementById("pictureframe").className = 'wooden';

Answer 2

不是

pictureframe.style.className = ...

但

pictureframe.className = ...

DEMO

Answer 3

试试这个：

onclick ="pictureframe.className = 'wooden'"

Answer 4

如果你想将其他一些类用于样式，那么你可能需要使用类似的东西：

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

通过这种方式，您可以使用样式http://jsfiddle.net/NjTea/5/

保持课程

单击更改div的背景图像

4 个答案: