Question

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

我只想使用一个className和
我希望边距增加，例如，每个类的实例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，它就像（应用于class + X的最后一个实例的margin）所以每个具有相同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

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/

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

2 个答案: