如何从上到下移动 class of div？

Question

我想要的是使用 setInterval() 函数将所有 div 和 class "goccia" 从上到下一起移动。

我不明白为什么它只移动第一个元素 (.goccia)

这是我的 JavaScript 代码。

var campo = document.querySelector('#campo');
var marginTop = 0;

function creaGocce(){
    var numeroGocce = document.querySelector('input').value;
    for (var i = 0; i < numeroGocce; i++) {
       campo.innerHTML += ' <div class = "divGoccia"> <div class = "goccia"> 
    </div> </div>';
    }
}
function scompari(){
    document.querySelector('.contenitore').style.display = 'none';
}
function spostaGocce(){
    var goccia = document.querySelector('.goccia');
    goccia.style.marginTop = marginTop + "px";
    marginTop += 10;
}
function muoviti(){
    scompari();
    creaGocce();
    setInterval(spostaGocce, 1000);
}
document.querySelector('button').addEventListener('click', muoviti);

Answer 1

我想你正试图将你创建的每个 div 发送到底部。

您应该使用 css 属性 "position: absolute" 和 "top: 0px" 并将其应用于 campo（div 的容器）或创建一个新容器。会更容易。

我建议您检查 this W3Schools article 并尝试每个参数以了解它。

继续编码！

如何从上到下移动 class of div？

How can I move a class of div from top to bottom?

html

javascript

css

function

setinterval