css 使用JavaScript调整网格大小

x759pob2  于 2022-11-19  发布在  Java
关注(0)|答案(1)|浏览(138)

我已经在这个问题上停留了相当长的一段时间。我只是想得到一些提示或得到正确的方向,因为我正在尽我最大的努力来解决这个问题。
简介:我正在完成Odin Project - Etch-a-Sketch。在这个问题中,我将创建一个16 x16的网格,使用JavaScript创建组成该网格的div。然后我创建一个按钮,该按钮会出现提示,用户输入将变为网格的新大小。例如,如果用户输入为“50,”则网格将从16 x16变为50 x50.在获得用户输入之前,所有这些步骤都已完成.
问题在于:我不知道如何从我的用户输入中获取值,并使其更改我的网格大小。
下面是我的代码:
第一个
我不确定我是否有错误的CSS网格编码或是否有JavaScript的东西,我需要添加,将改变我的网格。我知道有100通过整个项目的演练,但我只是真的试图通过它自己的工作,使我的代码工作,而不是别人。任何帮助将不胜感激,谢谢!
我试过了

document.getElementById('container').style.gridTemplateColumns = "uerInput , auto";

它没有工作,但我不确定问题是语法还是其他完全。

eh57zj3b

eh57zj3b1#

您几乎已经做到了!"userInput , auto"被应用到CSS属性中,因此值最终是字符串“userInput”,这不是用户想要输入的数字。
您可能想要使用repeat()函数,如下所示:

document.getElementById('container').style.gridTemplateColumns = `repeat(${userInput}, 1fr)`;

相关问题