Revert back styles in HTML

So I have this css code to define a <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;
}

I have this function that does document.getElementById('menu').style.display = 'none'; This resets the styling for this menu. Is it possible to create the CSS using a javascript function

  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         ."';

doesn’t work. If someone can try and help me make it so that I can use javascript to represent that CSS, it would be greatly appreciated.

EDIT: Full Code Here: https://paste.pythondiscord.com/ijuluwuzab.xml

Answer

if you want hide particular div using JavaScript,

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

then if you want that display that div again

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

& you can use also this for hide perticular div

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

then for display again

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

Thank You…

Advertisement

Answer