Intenté agregar "1fr " al estilo de un elemento DOM muchas veces usando un ciclo for y el operador "+=" , pero solo se aplicó una vez, sin importar cuántas veces ejecuté el ciclo. Entonces, me gustaría saber por qué se comporta de esta manera. Aquí hay un poco de mi código.
for (i = 1; i <= number; i++){ sketchPadElement.style.gridTemplateColumns += "1fr "; } Como no pude hacer que funcionara, escribí una función para repetir la cadena y la usé para generar tantos "1fr " como necesitaba en una cadena.
function makeGrid(number) { sketchPadElement.style.gridTemplateColumns = repeatString("1fr ", number); }Y eso funciona bien, pero aún me encantaría saber por qué falló mi intento anterior.
Al asignar la cadena, cualquier espacio final se elimina automáticamente. Entonces, en lugar de usar un espacio final, use un espacio inicial:
for (let i = 1; i <= number; i++){ sketchPadElement.style.gridTemplateColumns += " 1fr"; } Pero en lugar de hacer un bucle, es mejor usar directamente la función CSS repeat() :
sketchPadElement.style.gridTemplateColumns = `repeat(${number}, 1fr)`;