javascript - 具有相同类的许多 DIV 的不同/增加 CSS 值

Question

我想使用 javascript 更改许多单独的 DIV 的左边距值。问题在于:

1. 我只想使用一个 className 和
2. 我希望边距增加，例如，为类的每个实例增加 100 像素。这样，不是让所有的 DIV 彼此重叠，而是每个 DIV 将间隔开:第一个在 margin-left:0px，第二个在 margin-left:100px，第三个在 margin-left:200px，等等。

这是我的代码，它只是将相同的 margin-left 应用于所有 DIV。

<script>
    b = document.getElementsByClassName('spacing');
    for (i = 0; i < b.length; i++) {
    b[i].style.marginLeft = "100px";
    }
</script>

有没有办法让 javascript 依次查找类的每个实例，而不是简单地对所有应用 margin-left:100px，它会做类似(应用于类的最后一个实例的边距 + X)这样的事情具有相同 className 的 100 个 DIV 最终具有唯一的 marginLeft 值？

Answer 1

是的，有一种方法可以简单地将边距乘以迭代次数，例如 i*100+'px' 而不是这个“100px”

var b = document.getElementsByClassName('spacing');
for (i = 0; i < b.length; i++) {
b[i].style.marginLeft = i*5+'px';
}

Here is the working example