我正在尝试在单击一个按钮(https://jsfiddle.net/3ft6svgk/2/)时更改grid-template-columns
的大小。
html:
<div class="grid-squares">
<div class="grid_item">
<h2>Lorem Ipsum</h2>
<button id="firstButton">Learn More</button>
</div>
<div class="grid_item">
<h2>Lorem Ipsum</h2>
</div>
<div class="grid_item">
<h2>Lorem Ipsum</h2>
</div>
<div class="grid_item">
<h2>Lorem Ipsum</h2>
</div>
</div>
css:
.grid-squares{
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: 300px;
}
javscript:
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"
在控制台中。如何正确更改grid-template-columns
的值
发布于 2019-05-31 07:11:46
试试这个:
firstButton = document.getElementById("firstButton")
firstButton.onclick = function(){
squaresGrid = document.getElementsByClassName("grid-squares");
squaresGrid[0].style.gridTemplateColumns = "1000px";
}
https://stackoverflow.com/questions/56386706
复制相似问题