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

Question

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

1. 我只想使用一个 className 和
2. 我希望边距增加，例如，类的每个实例增加 100px。这样，不是让所有 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 应用于所有实例，它会执行类似 (margin应用于类的最后一个实例 + X) 这样的操作，因此 100 个 DIV 中的每一个相同的 className 最终有一个唯一的 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'; }

这是工作示例

Answer 2

您想要做的是通过循环的每次迭代来跟踪您增加的利润：

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/