使用javascript修改网格模板列

我试图在单击按钮（）时更改

网格模板列的大小

html:

脚本：

firstButton = document.getElementById("firstButton")
firstButton.onclick = function(){
  squaresGrid = document.getElementsByClassName("grid-squares");
  squaresGrid.style.gridTemplateColumns = "1000px";
}

有了这个代码，我得到了

"Uncaught TypeError: Cannot set property 'gridTemplateColumns' of undefined
    at HTMLButtonElement.repairsAndUpgradesButton.onclick"

在控制台中。如何正确更改网格模板列的值？
返回元素集合

您需要在
上循环.gridSquares
：

squaresGrid = document.getElementsByClassName("grid-squares");
for (let i = 0; i < squaresGrid.length; i++) {
   squaresGrid[i].style.gridTemplateColumns = "1000px";
}

您还需要使用和按钮，而不是使用
。onclick

这可以在以下工作示例中看到：


firstButton=document.getElementById（“firstButton”）
firstButton.addEventListener（'click'，function（）{
squaresGrid=document.getElementsByClassName（“网格正方形”）[0]；
squaresGrid.style.gridTemplateColumns=“1000px”；
});
。网格正方形{
显示：网格；
网格模板柱：1fr 1fr；
网格自动行：300px；
}

乱数假文
了解更多
乱数假文
乱数假文
乱数假文
试试这个：

firstButton = document.getElementById("firstButton")
firstButton.onclick = function(){
  squaresGrid = document.getElementsByClassName("grid-squares");
  squaresGrid[0].style.gridTemplateColumns = "1000px";
}

squaresGrid = document.getElementsByClassName("grid-squares");
for (let i = 0; i < squaresGrid.length; i++) {
   squaresGrid[i].style.gridTemplateColumns = "1000px";
}

squaresGrid = document.getElementsByClassName("grid-squares")[0];
squaresGrid.style.gridTemplateColumns = "1000px";

firstButton = document.getElementById("firstButton")
firstButton.onclick = function(){
  squaresGrid = document.getElementsByClassName("grid-squares");
  squaresGrid[0].style.gridTemplateColumns = "1000px";
}