如何使用 JS 更改网格模板列样式？

Question

this is the class I'm trying to change in my CSS file.

.screen{
margin-top: 0%;
 width: 75%;
 height: 75%;
 background-color: lightgrey;
 display: grid;
 grid-template-columns: repeat(16, 1fr);
 grid-template-rows: repeat(16, 1fr);
}

I assign a size variable and then I assume I can use something like:

document.getElementsByClassName('screen').style = "grid-template-columns: repeat(" + size + ", 1fr)"

but cannot get it to work. :(

Answer 1

这是因为document.getElementsByClassName('screen')返回一个数组，因此请尝试使用此数组

document.getElementsByClassName('screen')[0].style

Answer 2

You Simply do the following:

document.getElementById("yourdivision").style.gridTemplateColumns = "50px 50px 50px";

Or:

document.getElementById("yourdivision").style.gridTemplateColumns = "1fr 1fr 1fr";