CSS/Javascriptベースの画像セレクタ

Question

私が許しても、私はJavascriptの学習を始めています。これが可能かどうかわかりません。

<div class="container"> 
<div class="topspace"> 
    <div id="picholder" class="pic1"> 
     <div class="picsel" id="picsel1" onclick="imgSel(1)"></div> 
     <div class="picsel" id="picsel2" onclick="imgSel(2)"></div> 
    </div> 
</div> 
</div> 

そして私が達成したいもの（彼らはpicholderのdiv要素の底にわずか四角形を表示されます）私は変更することができます「またはPicsel」のdivの1つをクリックすることです：私は、次のHTMLコードを持っていますpicholder divに関連付けられたクラスを変更して、picholderで使用されるbackgroundImage。

function imgSel(n) { 
var id1 = "pic" + n; 
var id2 = "picsel" + n; 

// 'zero out' all the picsel boxes to their default color 
document.getElementByClass('picsel').style.backgroundColor="#333"; 
// change the background-image for picholder 
document.getElementById('picholder').style.className=id1; 
// change the picsel box that was clicked to white 
document.getElementById(id2).style.backgroundColor="#FFF"; 
} 

そして、私のCSSは次のような表示されます：私はjavascriptのような表示されます

#picholder {width:798px; height:340px; border:1px solid #333; background-color:#333;} 
.picsel {width:8px; height:8px; background-color:#333; border:1px solid #333; margin-left:4px; top:340px; position:relative; float:left;} 
.picsel:hover {cursor:pointer; background-color:#888;} 
.pic1 {background-image:url('data/main001.jpg');} 
.pic2 {background-image:url('data/main002.jpg');} 

私はそれにアラートを実行した変数は、右追加されているので、私は私はどうなったと思います不思議ですが、classNameを変更することは可能ですか（それはコマンドですか？）。この時点で私は変数をclassName = varまたはgetElementById（var）に代入することはできないと思っていますが、それは...あります。

現在はhttp://www.mdw-art.com/で実行されていますが、HTMLベースのバージョンでは現在表示されている四角形が示されていません。だから私は基本的にそれをしたい、しかし私はボックスを取得して、現在表示されているものを表示し、HTMLからコードを取得しようとしている（私は後に他のギャラリーに同じ概念を適用したいので）。

Answer 1

はい.style.classNameしてみてください。そうすれば、選択を解除するために要素からクラス名を削除できます。

Answer 2

は、選択したアイテムへのクラス名を追加し、そのクラスのCSSは、JavaScriptでインラインスタイルを変更するのではなく、あなたのための作業を行うことができ、.className代わりの