如何使用动态添加的类名称移动div

问题描述：

因此，目前在课堂上，我们试图仅使用Javascript，CSS和基本HTML制作15-益智。我也不允许修改html，有趣的东西。反正我是能够动态类名称添加到我的HTML和CSS中引用它们如下：如何使用动态添加的类名称移动div

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; 
     } 
    }

在我们的CSS那么我们可以通过简单地陈述.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上述方式而不是

你可以提供一个样本小提琴说明问题了吗？ –

我很想......但你知道，学术工作。 – SomeStudent

如果'a15'是类名称，请使用document.getElementsByClassName（'a15'）[0]而不是getElementById。 Top和Left属性仅适用于CSS“position：absolute;” https://jsfiddle.net/unj1njt7/ –

答

你加入class那些DIV（S），所以当你不是引用它们：

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/

看到了，这就是我的想法，但这不起作用。这两个选项都没有工作 – SomeStudent

更新了答案，看看是否有帮助。 – leninhasda

唉，在一个事情有意义的世界里应该有效，可悲的是这不是这样一个世界。这是最令人困惑的，因为我们可以像普通的类一样在CSS中清楚地引用它。 – SomeStudent

如何使用动态添加的类名称移动div

相关推荐