有没有办法用JS隐藏绝对div？

Question

我有这个 .endGame div，我想隐藏它，然后在需要时再次显示它。所以我创建了 .endGameDisplay 来隐藏它，但它不能那样工作，我也不知道为什么。它仅在 display: none; 在 .endGame

时隐藏

在 java 脚本中，我希望它在打开页面时隐藏，所以我有这样的东西：

const endGame = document.querySelector('.endGame');

endGameOff();

//end game on func
function endGameOn() {
    endGame.classList.remove('.endGameDisplay');
}

//end game off func
function endGameOff() {
    endGame.classList.add('.endGameDisplay');
}

我也试过把classlist.add改成.remove来检查我是不是记错了，但是还是没有。

我的HTML:

<div class="endGame">
    <h1>You</h1>
    <h2 class="wonORlost">text</h2>
    <h3>Do you want to restar game or go back to the menu?</h3>
    <div class="btns">
         <div class="restart">Restart</div>
         <div class="exit">Exit</div>
    </div>
</div>

我的CSS:

.endGame {
        position: absolute;
        z-index: 1;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        background: $primary-color;
        color: $white-color;
        border-radius: 25px;
        text-align: center;
        box-shadow: 0 0 15px #333;
        

        .h1 {
            font-weight: $font-bold;
        }

        .h2 {
            font-weight: $font-bold;
            color: lighten($bot-color, 15%);
        }

        .h3 {
            font-weight: $font-normal;
        }

        .btns {
            display: grid;
            justify-content: center;
            justify-items: center;

            .restart {
                background: $green-color;
                cursor: pointer;
                @include transition-ease;
    
                &:hover {
                    background: darken($green-color, 10%);
                    @include transition-ease;
                }
            }
    
            .exit {
                background: $red-color;
                cursor: pointer;
                @include transition-ease;
    
                &:hover {
                    background: darken($red-color, 10%);
                    @include transition-ease;
                }
            }
        }

        &.endGameDisplay {
            display: none;
        }
    }

Answer 1

添加 class 时删除句点 (.)。 .endGameDisplay 应该是 endGameDisplay:

const endGame = document.querySelector('.endGame');

endGameOff();

//end game on func
function endGameOn() {
  endGame.classList.remove('endGameDisplay');
}

//end game off func
function endGameOff() {
  endGame.classList.add('endGameDisplay');
}

.endGameDisplay {
  display: none;
}

<div class="endGame">
  <h1>You</h1>
  <h2 class="wonORlost">text</h2>
  <h3>Do you want to restar game or go back to the menu?</h3>
  <div class="btns">
    <div class="restart">Restart</div>
    <div class="exit">Exit</div>
  </div>
</div>

有没有办法用JS隐藏绝对div？

Is there a way to hide absolute div with JS?

html

javascript

css

absolute

hide