javascript - 当我在 javascript 上使用它们时，为什么不能通过 css 设置标签样式？

Question

我也在尝试使用 css 设计我的 div 和按钮的样式。但是在为我的按钮包含一个 javascript 代码之后，它的功能是显示和隐藏我的 div 表单。无论我在我的 css 上输入什么，似乎都不会再影响我的 div 的样式。

我需要做什么？

这是我的代码:

var theForm = document.getElementById('show-form').style.visibility = 'hidden';
var theButton = document.getElementById('show-button');
var thexButton = document.getElementById('hide-button');

thexButton.onclick = function() {
  document.getElementById('show-form').style.visibility = 'hidden';
}

theButton.onclick = function() {
  document.getElementById('show-form').style.visibility = 'visible';
}

.hide-button {
  background: red;
}

.form-wrapper {
  margin: auto;
  width: 50%;
}

<button id="show-button">Add Report</button>
<div class="form-wrapper" id="show-form">
  <button id="hide-button">X</button>
  <form action="add.php" method="post">
    <label>File Name: </label> <input class="input2" type="text" required><br>
    <input class="submit-btn" type="submit" name="insert" value="Save">
  </form>
</div>

Answer 1

因为你的按钮有 hide-button 的 id 但在 css 中你选择它为 .hide-button 所以改变下面的代码

.hide-button {
  background: red;
}

对此

#hide-button {
  background: red;
}