更改Button元素的类以显示/隐藏它

Question

我试图根据代码中的某些条件显示或隐藏按钮元素。我已将按钮的默认CSS设置为“隐藏” display: none，然后添加一个将显示更改为的类display: block。

HTML：

<div>
  <button id="show">SHOW</button>
</div>

CSS：

#show {
  display: none;
}

#show .visible {
  display: block;
}

JS：

var d = document.getElementById('show');
d.className += "visible";

我也尝试过：

var d = document.getElementById('show');
d.classList.add("visible");

以及：

documnet.getElementById('show').classList.add('visible');

问题是我无法使该类正确应用，并且在更新该类时也不会显示按钮。我确定我忽略了一些简单的事情，只是不确定有人可以提供帮助。

Answer 1

您将类“visible”放在具有 id“show”的同一元素上。

因此，在 CSS 中，#show 和 .visible 之间不应有空格。

超文本标记语言

<div>
  <button id="show">SHOW</button>
</div> 

CSS

    #show {
  display: none;
}

#show.visible {
  display: block;
}

JS

var d = document.getElementById('show');
d.classList.add("visible");