恢复HTML中的样式

Question

所以我有这个css代码来定义<div class='mc-menu' id ='menu'>

.mc-menu {
--btn-size: 30pt;
display: grid;
grid-template-columns: var(--btn-size) calc(var(--btn-size) * 10) var(--btn-size);
grid-template-rows: repeat(3, var(--btn-size)) 16px var(--btn-size);
grid-template-areas: ".       first       ." ".       second      ." ".       third       ." ".       .                   ." "lang fourth         .";
grid-gap: 8px;
}
.mc-menu .mc-button:nth-child(1) {
grid-area: first;
}
.mc-menu .mc-button:nth-child(2) {
grid-area: second;
}
.mc-menu .mc-button:nth-child(3) {
grid-area: third;
}
.mc-menu .double {
grid-area: fourth;
}
.mc-menu .double .mc-button:nth-child(1) {
grid-area: left;
}
.mc-menu .double .mc-button:nth-child(2) {
grid-area: right;
}
.mc-menu .mc-button:nth-child(5) {
grid-area: lang;
}
.mc-menu .double {
width: 100%;
height: 100%;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr;
grid-template-areas: 'left right';
grid-gap: 8px;
}

我有一个执行document.getElementById('menu').style.display = 'none';的函数。这会重置此菜单的样式。是否可以使用javascript函数创建CSS

document.getElementById('menu').style.display="grid";
document.getElementById('menu').style.gridTemplateColumns = "30pt 300pt 30pt)";
document.getElementById('menu').style.gridTemplateRows = 'repeat(3, 30pt) 16px 30pt';
document.getElementById('menu').style.gridGap ='8px';
document.getElementById('menu').style.gridTemplateAreas = '".         first       ." ".       second      ." ".       third       ." ".       .                   ." "lang fourth         ."'; 

不起作用。如果有人能帮我制作它，让我可以使用javascript来表示CSS，我将不胜感激。

编辑：此处为完整代码：https://paste.pythondiscord.com/ijuluwuzab.xml

Answer 1

如果您想使用JavaScript、隐藏特定的div

document.getElementById('menu').style.opacity = "0";

如果你想再次显示div

document.getElementById('menu').style.opacity = "1";

&您也可以将其用于隐藏属性div

document.getElementById('menu').style.display = "none";

然后再次显示

document.getElementById('menu').style.display = "block";

谢谢。。。