Tengo un HTML y estoy tratando de aleatorizar cada atributo de margen superior de capa.
function randomize() { let r; let list = document.querySelectorAll("span"); for (let i = 0; i < list.length; i++) { r = Math.floor(Math.random() * 50); list.forEach((list) => { style.top = `${r} + px`; }); } } span { position: absolute; height: 20px; width: 20px; border-radius: 100%; z-index: -2; } <div class="parallax"> <span class="layer" data-speed="-5">10110</span> <span class="layer" data-speed="-5">0</span> </div>¿En qué me estoy equivocando aquí? No puedo encontrar la solución adecuada.
Porque <span> es de forma nativa un elemento en línea y el margen no tiene ningún efecto.
Cambie sus <span> s a <div> s.
Unas pocas cosas:
top de CSS, el elemento debe tener una posición definida. Puede configurar eso en el CSS ( position: relative ) o configurarlo en el JS. ( EDITAR OP agregó CSS que ya tenían para establecer la position . Dejando esto aquí para las personas que usan top sin establecer la position de un elemento)forEach lo contrario, tendrá el mismo valor para todos los elementos de spanstyle al elemento que está pasando en forEach , por ejemplo, list.style.styleProp function randomize() { let r; let list = document.querySelectorAll("span"); for (let i = 0; i < list.length; i++) { list.forEach((list) => { r = Math.floor(Math.random() * 50); list.style.top = r + 'px'; }); } } randomize(); span { position: absolute; height: 20px; width: 20px; border-radius: 100%; z-index: -2; } <div class="parallax"> <span class="layer" data-speed="-5">10110</span> <span class="layer" data-speed="-5">0</span> </div>