在JavaScript中添加CSS styles时，加法赋值运算符是否起作用？

Question

我多次尝试使用for循环和"+="运算符将"1fr "添加到 DOM 元素的样式中，但无论我运行循环多少次，它只应用了一次。 所以，我想知道为什么它会这样。 这是我的一些代码。

for (i = 1; i <= number; i++){
  sketchPadElement.style.gridTemplateColumns += "1fr ";
}

因为，我无法让它工作，我写了一个 function 来重复这个字符串，并用它来生成一个字符串中我需要的尽可能多的"1fr " ，就像这样。

function makeGrid(number) {
  sketchPadElement.style.gridTemplateColumns = repeatString("1fr ", number);
}

这很好用，但我仍然很想知道为什么我之前的尝试失败了。

Answer 1

分配字符串时，会自动删除任何尾随空格。 因此，不要使用尾随空格，而应使用前导空格：

for (let i = 1; i <= number; i++){
  sketchPadElement.style.gridTemplateColumns += " 1fr";
}

但与其循环，不如直接使用repeat() CSS function：

sketchPadElement.style.gridTemplateColumns = `repeat(${number}, 1fr)`;