在JavaScript中使用CSS Grid repeat（）声明

我需要了解如何利用JavaScript中CSS网格中的

repeat（）

来执行以下操作：

let变量=提示（“数字”）

el.style.setProperty（'grid-template-columns:repeat（variable，1fr）

执行以下操作也不起作用：

el.style.setProperty（'grid-template-columns:repeat（'+variable+'，1fr）

我已尝试在
repeat（）
中连接变量，但没有成功。
首先，作为编辑，很遗憾，您的原始代码无法工作，因为：

el.style.setProperty('grid-template-columns: repeat(' + variable + ', 1fr)')

您试图错误地设置属性
CSSStyleDeclaration.setProperty（）
需要两个或三个逗号分隔的参数；要更新属性，您需要更改使用方法：

el.style.setProperty('grid-template-columns', 'repeat(' + variable + ', 1fr)');

第三个参数是，如文档（链接如下）所示，
优先级
（应该是
“！important”
、
未定义
或
”
；如果未提供任何值，该参数将被视为空字符串）

您的方法似乎让人想起更新
HTMLElement
的
style
属性的尝试；它可以用字符串修改，但是使用可用的方法（例如您尝试使用的方法）对于那些可用的浏览器来说几乎肯定要可靠得多

但是，要使用
样式
属性字符串修改方法：


document.querySelector（'#setRepeats'）.addEventListener（'click'，function（））{
让grid=document.getElementById（'box'），
repeatNumber=document.getElementById（'repeatNumber'）。值；
//使用HTMLElement.setAttribute（）更新
//“网格”节点：
grid.setAttribute（'style'，
//使用以下连接字符串更新属性：
'网格模板列：重复（'+repeatNumber+'，1fr'）；
});
#框{
显示：网格；
网格模板列：重复（变量（--repeatNumber，2），1fr）；
网格间距：5px；
}
.元素：第n个子元素（奇数）{
背景色：#ccc；
}
.元素：第n个子元素（偶数）{
背景色：#fff；
}

更新重复
1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
12
13
14
15
首先，作为编辑，很遗憾，您的原始代码无法工作，因为：

el.style.setProperty('grid-template-columns: repeat(' + variable + ', 1fr)')

您试图错误地设置属性
CSSStyleDeclaration.setProperty（）
需要两个或三个逗号分隔的参数；要更新属性，您需要更改使用方法：

el.style.setProperty('grid-template-columns', 'repeat(' + variable + ', 1fr)');

第三个参数是，如文档（链接如下）所示，
优先级
（应该是
“！important”
、
未定义
或
”
；如果未提供任何值，该参数将被视为空字符串）

您的方法似乎让人想起更新
HTMLElement
的
style
属性的尝试；它可以用字符串修改，但是使用可用的方法（例如您尝试使用的方法）对于那些可用的浏览器来说几乎肯定要可靠得多

但是，要使用
样式
属性字符串修改方法：


document.querySelector（'#setRepeats'）.addEventListener（'click'，function（））{
让grid=document.getElementById（'box'），
repeatNumber=document.getElementById（'repeatNumber'）。值；
//使用HTMLElement.setAttribute（）更新
//“网格”节点：
grid.setAttribute（'style'，
//使用以下连接字符串更新属性：
'网格模板列：重复（'+repeatNumber+'，1fr'）；
});
#框{
显示：网格；
网格模板列：重复（变量（--repeatNumber，2），1fr）；
网格间距：5px；
}
.元素：第n个子元素（奇数）{
背景色：#ccc；
}
.元素：第n个子元素（偶数）{
背景色：#fff；
}

更新重复
1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
12
13
14
15
当您将CSS声明作为CSS应用而不是通过JavaScript应用它时，它是否能像您期望的那样工作？这里重复函数的定义是什么？很抱歉没有提供完整的代码。@TylerH声明工作正常，例如
高度：10px；
etc@duhaime你是什么意思？只要<代码>重复（）
它可以在CSS GridAh中使用，repeat是一个CSS函数，不支持IE浏览器，我明白了：当你将它作为CSS应用而不是通过JavaScript应用时，同样的CSS声明是否能像你期望的那样工作？这里什么定义了repeat函数？很抱歉没有[Roving the full code.@TylerH声明工作正常，例如
高度：10px；
etc@duhaime你是什么意思？就CSS GridAh中可用的
repeat（）
而言，repeat是一个CSS函数，不支持IE浏览器，我明白了：