用javascript id更改CSS类会弄乱CSS样式吗？

Question

我试图制作一个HTML响应式网页，当您单击卡片时，卡片会翻转180度；当我用onclick事件的ID更改div类后，我的CSS样式弄乱了，并将卡片随机放在屏幕上。 我怎样才能解决这个问题？

我试图将CSS类的样式复制到id样式，但这会破坏动画。

 * { margin: 0; padding: 0; box-sizing: border-box; } .container { //all of the divs are in a container div display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; margin: 2rem auto; } .card-flip, #misto1, #misto2, ....{ position: relative; margin: 1rem; } .card-flip-faces, #misto1, #misto2,.... { -webkit-animation-play-state: paused; transition: all ease .5s; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: perspective(600px) rotateY(0deg); transform: perspective(600px) rotateY(0deg); } .card-flip .card-flip-faces { -webkit-transform: perspective(600px) rotateY(180deg); transform: perspective(600px) rotateY(180deg); box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.25); } .card-flip-front, .card-flip-back { padding: 2rem; width: 100%; height: 100%; text-align: center; transition: all ease .5s; } .card-flip-front { display: block; color: #11998e; background-color: white; } .card-flip-back { position: absolute; top: 0; color: white; background-color: #11998e; -webkit-transform: perspective(600px) rotateY(180deg); transform: perspective(600px) rotateY(180deg); -webkit-backface-visibility: hidden; backface-visibility: hidden; } .card-flip-icon { font-size: 600%; } .card-flip-title { margin-top: 2rem; margin-bottom: 1rem; font-weight: normal; text-align: center; text-transform: uppercase; } @media screen and (max-width: 576px) { .card-flip { width: calc(100% - 2rem); } } @media screen and (min-width: 576px) { .card-flip { width: calc(50% - 2rem); } } @media screen and (min-width: 992px) { .card-flip { width: calc(33.33% - 2rem); } } 

 <!-- This is how all of my divs look like --> <div id="misto1" onclick="handler_click1()"> <!--before id it was class="card-flip--> <div class="card-flip-faces"> <div class="card-flip-front"> <i class="card-flip-icon fas fa-flask"></i> <h4 class="card-flip-title">Title</h4> <p class="card-flip-text">Some text</p> </div> <div class="card-flip-back"> <i class="card-flip-icon fas fa-flask"></i> <h4 class="card-flip-title">Hemoleucograma</h4> <p class="card-flip-text"> Another fancy text</p> </div> </div> </div> <div id="misto2" onclick="handler_click2()"> <div class="card-flip-faces"> <div class="card-flip-front"> <i class="card-flip-icon fas fa-flask"></i> <h4 class="card-flip-title">Title</h4> <p class="card-flip-text">Some text</p> </div> <div class="card-flip-back"> <i class="card-flip-icon fas fa-flask"></i> <h4 class="card-flip-title">Hemoleucograma</h4> <p class="card-flip-text"> Another fancy text</p> </div> </div> </div> <!-- this is the script for the onclick animation --> <script type="text/javascript"> var x=0; function handler_click1(){ if(x==0){ document.getElementById('misto1').className ='card-flip'; x=1; } else{ document.getElementById('misto1').className ='card-flip-faces'; x=0; } } function handler_click2(){ if(x==0){ document.getElementById('misto2').className ='card-flip'; x=1; } else{ document.getElementById('misto2').className ='card-flip-faces'; x=0; } } </script> 

Answer 1

添加和删​​除特定类的预期方法是使用Element.classList ，它支持.add ， .remove和.toggle方法。

这些方法甚至可以重载其他字符串参数，以一次更改多个类。 使用toggle方法，您的用例可能很简单：

document.getElementById("misto1").addEventListener("click", function(e){
    e.target.classList.toggle("flipOver");
    // Where .flipOver is a class that rotates 180deg around the y-axis.
});

这是使用您的代码进行操作的示例 。 我做了尽可能少的更改，因此仍然需要进行大量的重构。