如何用JS隐藏绝对定位div？操作类名控制显隐不生效如何解决？

问题原因 #

你代码的核心错误是使用classList API 时多写了类名前缀.：
classList.add()、classList.remove()的入参是纯类名字符串，不需要带CSS选择器里的.前缀。你当前代码传入.endGameDisplay，会给元素添加带点的类名，和CSS中定义的endGameDisplay类不匹配，因此隐藏样式不生效。

修复方案 #

把JS代码里类名的前缀.删掉即可，修正后代码如下：

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');
}

可选排查项 #

如果修改后仍然不生效，可以按以下步骤排查：

• 打开浏览器开发者工具的Elements面板，选中.endGame元素，确认执行对应方法后，元素的class属性里是否正确出现/消失endGameDisplay类
• 切换到Styles面板，确认.endGame.endGameDisplay { display: none; }规则被正确匹配，没有被更高优先级的规则覆盖
• 注意classList的拼写是驼峰格式，L为大写，不要写成全小写的classlist

内容的提问来源于stack exchange，提问作者Smokus