时间戳

首页 > 解决方案 > 如何通过按钮触发 CSS

javascript - 如何通过按钮触发 CSS

问题描述

我需要按钮作为 CSS 动画的触发器。这只是一些基本的东西，但我把它搞砸了。我的错误是什么？为什么当我按下按钮时没有任何反应？

function xyz() {
  document.getElementById('box').classList.toggle(active)
}
#box {
  position: absolute;
  top: -120%;
  left: 20%;
  width: 60%;
  height: 60%;
  background: #000;
  transition: .5s;
  opacity: 0.7;
}

#box.active {
  top: 20%;
}

#box a {
  font-size: 3em;
  margin: 0;
  padding: 0;
  color: #fff;
}
<div id="box">
  <a href="#" class="close-box" onclick="closeMenu()">&times;</a>
</div>
<button type="button" onclick="xyz()">Click Me!</button>

标签： javascripthtmlcss

解决方案

问题似乎是您应该将类​​名指定为字符串。

document.getElementById('box').classList.toggle('active')

所以“活跃”，在单引号或双引号之间。

推荐阅读