javascript - 动态设置 `grid-template-columns` css属性的值

Question

让我们从一个例子开始:https://jsfiddle.net/ilyamilosevic/7nxv8cof/ 。因此，在示例中，我们将grid-template-columns的值设置为repeat(${n}, 1fr)，其中n是列数。在 Chrome 中(或在 Firefox 中，没关系)打开 devTools 后，我们看到前面提到的属性的值实际上是长替代值(grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr) 到简洁的 repeat(10, 1fr) 如果 n = 10。你可以称之为挑剔，但我很感兴趣为什么会发生这种情况。

其他信息:

• Windows；
• Chrome 57.0.2987.110 32 位；
• Firefox 52.0.1 32 位。

Answer 1

如果您按照所看到的规范步骤进行操作

setProperty
5. Let component value list be the result of parsing value for property property.

然后

parsing
1.Let list be the value returned by invoking parse a list of component values from value.

然后

parse a list of component values
1. Repeatedly consume a component value until an is returned, appending the returned values (except the final ) into a list. Return the list.

快到了

consume a component value
Otherwise, if the current input token is a <function-token>, consume a function and return it.

最后

consume a function
Create a function with a name equal to the value of the current input token, and with a value which is initially an empty list.
Repeatedly consume the next input token and process it as follows:
<)-token>
Return the function.
<EOF-token> This is a parse error. Return the function. anything else
Reconsume the current input token. Consume a component value and append the returned value to the function’s value.

简而言之，当它是一个函数时，它会被执行并分配其结果。