Question

因此，目前在课堂上，我们正在尝试使用仅Javascript，CSS和基本HTML制作15个谜题。我也不允许修改html，有趣的东西。无论如何，我能够在我的html中添加动态类名，并在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;
        }
    }

在我们的CSS中，我们可以通过简单地说明.a15并为其指定所需的边距，大小，图像定位等来引用它。但是，当我尝试通过使用document.getElementById（＆＃34; .a15＆＃34;）引用其id来移动它时.style.top =＆＃34; 200px＆＃34; - 或者只是＆＃34; a15＆＃34; - 这是行不通的。上面提到的方法是我在堆栈上看到的移动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。因此，问题仍然存在：＆＃34;如何使用动态添加的类名移动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/

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

1 个答案: