如何在此处淡出并修复重置按钮？

Question

document.getElementById("shrinkBtn").addEventListener("click", function() {

  document.getElementById("box").style.height = "25px";

});

document.getElementById("growBtn").addEventListener("click", function() {

  document.getElementById("box").style.height = "250px";

});

document.getElementById("fadeOutBtn").addEventListener("click", function() {

  document.getElementById("box").style.opacity = "slow";

});
document.getElementById("resetBtn").addEventListener("click", function() {

  document.getElementById("box").style.height = "150px";

});

<p>Press the buttons to move the box!</p>

<div id="box" style="height:150px; width:150px; background-color:teal; margin:25px"></div>

<button id="shrinkBtn">Shrink</button>
<button id="growBtn">Grow</button>
<button id="fadeOutBtn">Fade Out</button>
<button id="reset">Reset</button>

我添加了两个按钮，但它破坏了重置按钮。我真正需要的是：

<button id="growkBtn">Grow</button>
<button id="blueBtn">Blue</button>
<button id="fadeOutBtn">Fade Out</button>
<button id="reset">Reset</button>

Answer 1

您可以使用css通过更改class来创建fade-out效果，并使用重置按钮更改重置class和高度。

此外，您在 resetBtn eventListiner 中使用了错误的 id，id 是 reset 而您的目标是 resetBtn。

document.getElementById("shrinkBtn").addEventListener("click", function() {
  document.getElementById("box").style.height = "25px";
});

document.getElementById("growBtn").addEventListener("click", function() {
  document.getElementById("box").style.height = "250px";
});

document.getElementById("fadeOutBtn").addEventListener("click", function() {
  document.getElementById("box").className = "hidden";
});
document.getElementById("resetBtn").addEventListener("click", function() {
  document.getElementById("box").style.height = "150px";
    document.getElementById("box").className = "visible";
});

.visible {
  visibility: visible;
  opacity: 1;
}

.hidden {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 2s, opacity 2s linear;
}

<p>Press the buttons to move the box!</p>

<div id="box" class="visible" style="height:150px; width:150px; background-color:teal; margin:25px"></div>

<button id="shrinkBtn">Shrink</button>
<button id="growBtn">Grow</button>
<button id="fadeOutBtn">Fade Out</button>
<button id="resetBtn">Reset</button>

如何在此处淡出并修复重置按钮？

How do I fadeOut and fix the reset button here?

javascript

button

fadeout