動的に追加されたクラス名を使用してdivを移動する方法

Question

現在、クラス内では、Javascript、CSS、および基本HTMLのみを使用して15個のパズルを作成しようとしています。私はまた、htmlを全く変更することは許されていません。楽しいものです。とにかく、私は私のHTMLに動的なクラス名を追加し、次のようにCSSでそれらを参照することができました。私たちのCSSで

var children = document.getElementById("puzzlearea").childNodes; 

//iterates through all children 
    for (child in children) { 

     //if children is a div then we do something to it 
     if (children[child].nodeName == "DIV") { 
      //add a class that corresponds to a css to the current div child that we are on 
      children[child].classList.add('a' + i); 
      i = i + 1; 
     } 
    } 

その後、我々は単に.a15を述べ、それに必要なマージンを割り当てることによって、それを参照することができます、サイズ、画像の配置、およびすべて。しかし、document.getElementById（ "。a15"）。style.top = "200px"または単に "a15"を使用してIDを参照して移動しようとすると、動作しません。上記の方法はdivを移動するために私がスタック上で見た提案です。次のように

現在、私は何かをしようとしています：

document.getElementsByTagName('div')[15].onclick = function() { 
      alert("work"); //does actually only happen on correct div 
      this.style.top = "500px" //still doesn't move it 
    } 

しかし、これでそれはまだそれを移動していない、そしてもちろん、すべてのdivをフェッチします。 "ダイナミックに追加されたクラス名を使ってdivを移動するにはどうすればいいですか？"

編集：位置がCSSで相対的でなければならないと言いますが、直接のiDを経由して、上記の方法ではなく

Answer 1

あなたはそれらのdiv要素（複数可）に classを追加している

ので、あなたがするのではなく、それらを参照しているとき：。

document.getElementById(".a15").style.top ... 

それは次のようになります。

document.getElementsByClassName("a15").style.top ... // without . 

getElementsByClassNameは、その特定のクラスを持つ要素の配列を返します。だから、あなただけの場合の例を働い

var currentDiv = document.getElementsByClassName("a15")[0] // assuming you have only one div with class a15 
// then 
currentDiv.style.top ... 

ような何かをしなければならないことがあります。https://jsfiddle.net/Laf54y1a/3/