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>

标签： javascripthtmlcss

Answer 1

由于您的按钮具有 hide-button 的 id 但在 css 中您将其选择为 .hide-button 所以更改以下代码

.hide-button {
  background: red;
}

对此

#hide-button {
  background: red;
}