使用 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.
});

下面是使用代码的实际示例。我尽可能少地更改，因此仍然需要进行相当多的重构。