Different/Increasing CSS 许多具有相同 Class 的 DIV 的值

Question

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

我只想使用一个 class名称和
我希望边距增加，例如 class 的每个实例增加 100px。这样，不是让所有 DIV 彼此重叠，每个 DIV 都将 space 出来：第一个在 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 依次找到 class 的每个实例，而不是简单地将 margin-left:100px 应用于所有实例，它会做类似的事情（保证金应用于class + X) 的最后一个实例，因此具有相同 class 名称的 100 个 DIV 中的每一个最终都具有唯一的 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

Different/Increasing CSS 许多具有相同 Class 的 DIV 的值

Different/Increasing CSS Value for Many DIVs With Same Class

html

javascript

css

getelementsbyclassname

margin-left