使用javascript修改grid-template-column
使用javascript修改grid-template-column
提问于 2019-05-31 07:05:34
我正在尝试在单击一个按钮(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的值
回答 1
Stack Overflow用户
发布于 2019-05-31 07:11:46
试试这个：
firstButton = document.getElementById("firstButton")
firstButton.onclick = function(){
squaresGrid = document.getElementsByClassName("grid-squares");
squaresGrid[0].style.gridTemplateColumns = "1000px";
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56386706
复制相关文章
相似问题