如何在JS中写CSS？

Question

我想做一个记忆游戏。我想在 JS 中为翻转编写一个 CSS 动画，这样我就可以调用一个函数，因为我想制作一个 onclick 动画而不是悬停动画。

如何使用 Javascript 中的 oncklicked 函数制作 CSS 翻转动画？

var card = "<div class='flip-card'><div class='flip-card-inner'><div class='flip-card-front'><button id='button'onclick='Flipfront()'style='width:300px;height:300px; marign:50px; background-image:url(Frontpage.jpg);'></button></div><div class='flip-card-back'><button id='button2' onclick='Flipback()'style='width:300px;height:300px; marign:50px; background-image:url(IMG1.jpg);'></button></div></div></div>"

for (let i = 0; i < 20; i++) {

  document.querySelector("#container").innerHTML += card;

}

function Flipfront() { 

  // ?

}

function Flipback() { 

  // ?

}

.flip-card {

  background-color: transparent;

  width: 300px;

  height: 200px;

  border: 1px solid #f1f1f1;

  perspective: 1000px;

  /* Remove this if you don't want the 3D effect */

}

/* This container is needed to position the front and back side */

.flip-card-inner {

  position: relative;

  width: 100%;

  height: 100%;

  text-align: center;

  transition: transform 0.8s;

  transform-style: preserve-3d;

}

/* Do an horizontal flip when you move the mouse over the flip box container */

.flip-card:hover .flip-card-inner {

  transform: rotateY(180deg);

}

/* Position the front and back side */

.flip-card-front,

.flip-card-back {

  position: absolute;

  width: 100%;

  height: 100%;

  -webkit-backface-visibility: hidden;

  /* Safari */

  backface-visibility: hidden;

}

/* Style the front side (fallback if image is missing) */

.flip-card-front {

  background-color: #bbb;

  color: black;

}

/* Style the back side */

.flip-card-back {

  transform: rotateY(180deg);

}

<div id="outerbackground">

  <img src="background.jpg" class="backgorund" border="1" id="BG">

</div>

<div id="container"></div>

Answer 1

您是否尝试过点击时动态更改类？.flip-card-inner单击元素时，您可以使用classlist属性及其方法添加类并删除 '.flip-card-front`用法是：elem.classList.add("flip-card-inner");elem.classList.remove("flip-card-front");

Answer 2

为了进一步阐述我的评论：:hover您可以使用类来.flipped控制卡片的翻转状态，而不是使用 。然后，在Flipfront()和Flipback()方法中，确保接受将从标记传入的参数，该参数将作为Flipfront(this)或调用Flipback(this)。这将允许您访问触发它的元素。然后，只需使用Element.closest()访问.flip-card父类，并使用Element.classList.add()或Element.classList.remove()切换flipped类：var card = "<div class='flip-card'><div class='flip-card-inner'><div class='flip-card-front'><button id='button'onclick='Flipfront(this)'style='width:300px;height:300px; marign:50px; background-image:url(Frontpage.jpg);'></button></div><div class='flip-card-back'><button id='button2' onclick='Flipback(this)'style='width:300px;height:300px; marign:50px; background-image:url(IMG1.jpg);'></button></div></div></div>"for (let i = 0; i < 20; i++) {  document.querySelector("#container").innerHTML += card;}function Flipfront(el) {   el.closest('.flip-card').classList.add('flipped');}function Flipback(el) {   el.closest('.flip-card').classList.remove('flipped');}.flip-card {  background-color: transparent;  width: 300px;  height: 200px;  border: 1px solid #f1f1f1;  perspective: 1000px;  /* Remove this if you don't want the 3D effect */}/* This container is needed to position the front and back side */.flip-card-inner {  position: relative;  width: 100%;  height: 100%;  text-align: center;  transition: transform 0.8s;  transform-style: preserve-3d;}/* Do an horizontal flip when you move the mouse over the flip box container */.flip-card.flipped .flip-card-inner {  transform: rotateY(180deg);}/* Position the front and back side */.flip-card-front,.flip-card-back {  position: absolute;  width: 100%;  height: 100%;  -webkit-backface-visibility: hidden;  /* Safari */  backface-visibility: hidden;}/* Style the front side (fallback if image is missing) */.flip-card-front {  background-color: #bbb;  color: black;}/* Style the back side */.flip-card-back {  transform: rotateY(180deg);}<div id="outerbackground">  <img src="background.jpg" class="backgorund" border="1" id="BG"></div><div id="container"></div>

Answer 3

不要用 JS 写 CSS。相反，只需更改:hover规则以取决于.flip-card单击每个类时您切换的类。另请注意，您不应该使用onX属性，因为它们已经过时，并且由于违反了关注点分离原则而成为不良实践。相反，请使用不显眼的事件处理程序。内联属性也是如此style。将这些规则移至外部样式表中。这是一个工作示例：let card = '<div class="flip-card"><div class="flip-card-inner"><div class="flip-card-front"><button id="button"></button></div><div class="flip-card-back"><button id="button2"></button></div></div></div>';for (let i = 0; i < 20; i++) {&nbsp; document.querySelector("#container").innerHTML += card;}document.querySelectorAll('.flip-card').forEach(el => {&nbsp; el.addEventListener('click', () => el.classList.toggle('flipped'));});.flip-card {&nbsp; background-color: transparent;&nbsp; width: 300px;&nbsp; height: 200px;&nbsp; border: 1px solid #f1f1f1;&nbsp; perspective: 1000px;}.flip-card-inner {&nbsp; position: relative;&nbsp; width: 100%;&nbsp; height: 100%;&nbsp; text-align: center;&nbsp; transition: transform 0.8s;&nbsp; transform-style: preserve-3d;}/* remove :hover here */.flip-card.flipped .flip-card-inner {&nbsp; transform: rotateY(180deg);}.flip-card-front,.flip-card-back {&nbsp; position: absolute;&nbsp; width: 100%;&nbsp; height: 100%;&nbsp; -webkit-backface-visibility: hidden;&nbsp; /* Safari */&nbsp; backface-visibility: hidden;}.flip-card-front {&nbsp; background-color: #bbb;&nbsp; color: black;}.flip-card-back {&nbsp; transform: rotateY(180deg);}#button {&nbsp; width: 300px;&nbsp; height: 300px;&nbsp; background-image: url(Frontpage.jpg);}#button2 {&nbsp; width: 300px;&nbsp; height: 300px;&nbsp; background-image: url(IMG1.jpg);}<div id="outerbackground">&nbsp; <img src="background.jpg" class="backgorund" border="1" id="BG"></div><div id="container"></div>