Question

我试图制作一个HTML响应式网页，并在您单击卡片时将卡片翻转180度，然后在更改div类时使用onclick事件的ID，我的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.
});

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

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

1 个答案: