javascript – 如何按下按钮按下div？

2019-05-19 12:22:35 阅读：118 来源： 互联网

我试图在点击按钮后进行div翻转,但它似乎没有正常工作,我无法弄清楚原因.我想知道是否有人能够指出我正确的方向并纠正我的错误.

我的代码：

var init = function() {
  var card = document.getElementById('card');

  document.getElementById('flip').addEventListener('click', function() {
    card.toggleClassName('flipped');
  }, false);
};

window.addEventListener('DOMContentLoaded', init, false);

.container {
  width: 200px;
  height: 260px;
  position: relative;
  perspective: 800px;
}
#card {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  transition: transform 1s;
}
#card figure {
  margin: 0;
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}
#card .front {
  background: red;
}
#card .back {
  background: blue;
  transform: rotateY(180deg);
}
#card.flipped {
  transform: rotateY(180deg);
}

<section class="container">
  <div id="card">
    <figure class="front">1</figure>
    <figure class="back">2</figure>
  </div>
</section>

<section id="options">
  <p>
    <button id="flip">Flip Card</button>
  </p>
</section>

你可以找到一个JSFiddle here.

谢谢.

解决方法:

保持代码运行有两件事：

>默认情况下,JSFiddle在onLoad中运行JavaScript,它位于您正在等待的DOMContentLoaded事件之后,因此仅出于JSFiddle的目的删除它.
>据我所知,在vanilla JavaScript中没有toggleClassName函数.相反,我已将其更改为使用班级列表切换.

这是固定和工作的代码.我缩短了盒子的高度,使其更适合演示盒.

现场演示：

var card = document.getElementById('card');

document.getElementById('flip').addEventListener('click', function() {
    card.classList.toggle('flipped');
}, false);

.container {
  width: 200px;
  height: 100px;
  position: relative;
  perspective: 800px;
}

#card {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  transition: transform 1s;
}

#card figure {
  margin: 0;
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

#card .front {
  background: red;
}

#card .back {
  background: blue;
  transform: rotateY( 180deg);
}

#card.flipped {
  transform: rotateY( 180deg);
}

<section class="container">
  <div id="card">
    <figure class="front">1</figure>
    <figure class="back">2</figure>
  </div>
</section>

<section id="options">
  <p>
    <button id="flip">Flip Card</button>
  </p>
</section>

JSFiddle版本：https://jsfiddle.net/dL9v1ozf/2/

标签：javascript,css,html5,css3,html
来源： https://codeday.me/bug/20190519/1135060.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript – 如何按下按钮按下div？