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

你正在把课程＆＃34;可见＆＃34;在具有id＆＃34;显示＆＃34;的相同元素上。

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

HTML

<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");

Answer 2

请使用此方法！

而不是更改ID以切换类hide，以便按钮可见或不可见！

function myFunction() {
    var element = document.getElementById("show");
    element.classList.toggle("hide");
}

.hide{
  display:none;
}

#show{
  display: block;
}

<div>
  <button id="show">SHOW</button>
</div>
<button onClick="myFunction()">Toggle</button>

Answer 3

简单。写下这个：

#show.visible {
  display: block;
}

而不是：

#show .visible {
  display: block;
}

（只需删除 #show 和 .visible 之间的空间）

Answer 4

＆＃13;

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

＆＃13;

#show {
  /*display: none;*/
}
.invisible{
  display: none;
}
.visible {
  display: block;
}

＆＃13;

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

＆＃13;

我想推荐使用2个课程。 .visible，.invisible。

您应该在display:none上设置.invisible。不是#show。