Различное / увеличивающееся значение CSS для многих DIV с одним и тем же классом

Я хочу использовать javascript для изменения значения левого поля многих отдельных DIV. Загвоздка в том, что:

  1. Я хочу использовать только одно className и
  2. Я хочу, чтобы маржа увеличивалась, например, на 100 пикселей для каждого экземпляра класса. Таким образом, вместо того, чтобы все DIV располагались друг над другом, каждый DIV будет отсутствовать: первый на краю слева: 0 пикселей, второй на краю слева: 100 пикселей, третий на краю слева: 200 пикселей, и так далее.

Вот код, который у меня есть, который просто применяет одно и то же левое поле ко всем 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?


javascript html css getelementsbyclassname margin-left
person forestkelley    schedule 16.12.2017    source источник
comment
Если все элементы .spacing вложены. Просто используйте CSS .spacing { padding-left: 100px }, и все они будут складываться.   -  person Reactgular    schedule 16.12.2017

Ответы (2)


arrow_upward
1
arrow_downward

Что вы хотите сделать, так это отслеживать увеличивающуюся маржу на каждой итерации цикла:

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/

person Stefan Dochow    schedule 16.12.2017

arrow_upward
2
arrow_downward

Да, есть способ. Вы можете просто умножить размер поля на номер итерации, например, i*100+'px' вместо этого "100px"

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

Вот рабочий пример

person Lasha Sumbadze    schedule 16.12.2017
comment
Я согласен. имеет смысл исключить дополнительную переменную для отслеживания маржи. но так как i начинается с 0, оно должно быть (i+1)*100+'px', а не i*100+'px', чтобы соответствовать описанию - person Stefan Dochow; 16.12.2017
comment
'Каждый DIV будет отсутствовать: первый на краю слева: 0 пикселей, второй на краю слева: 100 пикселей, третий на краю слева: 200 пикселей', поле первого элемента должно быть равно 0, поэтому я решил умножить на номер итерации, а не итерация+1 - person Lasha Sumbadze; 16.12.2017