Отличается / увеличивается значение CSS для многих DIV с одинаковым классом
Я хочу использовать JavaScript для изменения значения левого поля многих отдельных DIV. Подвох в том, что:
- Я хочу использовать только одно className и
- Я хочу, чтобы маржа увеличилась, например, на 100 пикселей для каждого экземпляра класса. Таким образом, вместо того, чтобы все DIV приземлялись друг на друга, каждый DIV будет находиться на расстоянии: первый слева-поле:0px, второй слева-поле:100px, третий слева-поле:200px, и так далее.
Вот код, который у меня есть, который просто применяет одинаковое поле слева ко всем DIV.
<script>
b = document.getElementsByClassName('spacing');
for (i = 0; i < b.length; i++) {
b[i].style.marginLeft = "100px";
}
</script>
Есть ли способ получить javascript для последовательного нахождения каждого экземпляра класса и вместо простого применения margin-left:100px ко всем, он делает что-то вроде (наложение применяется к последнему экземпляру класса + X), поэтому каждый из 100 DIV с то же самое className заканчивается уникальным значением marginLeft?
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/
Да, есть способ. Вы можете просто умножить размер маржи на номер итерации, например, i*100+'px' вместо этого "100px".
var b = document.getElementsByClassName('spacing');
for (i = 0; i < b.length; i++) {
b[i].style.marginLeft = i*5+'px';
}