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

classNameDOM 要素のオブジェクトの一部ではstyleなく、直接のプロパティです。

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 に答える