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

Question

我想使用javascript来更改许多单独DIV的左边距值。问题是：

1. 我只想使用一个className和
2. 我希望边距增加，例如，每个类的实例100px。这样，不是让所有DIV都相互叠加，而是每个DIV都会空出：第一个在边缘左边：0px，第二个在边缘左边：100px，第三个在边缘左边：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应用于all，它执行类似的操作（应用于类+ X的最后一个实例的边距），因此每个100个DIV都有相同的className最终有一个唯一的marginLeft值？

Answer 1

你想要做的是通过循环的每次迭代来跟踪你增加的余量：

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

这应该够了吧。

在这里查看一个工作示例：https://jsfiddle.net/c4p9ry46/

Answer 2

是的有一种方法您可以简单地将保证金数量乘以迭代次数，如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