在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)`;