如何在 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

进一步详细说明我的评论：您可以使用类，例如 .flipped，而不是使用 :hover，来控制卡片的翻转状态。

然后，在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 2

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

用法是：

elem.classList.add("flip-card-inner");

elem.classList.remove("flip-card-front");

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++) {
  document.querySelector("#container").innerHTML += card;
}

document.querySelectorAll('.flip-card').forEach(el => {
  el.addEventListener('click', () => el.classList.toggle('flipped'));
});

.flip-card {
  background-color: transparent;
  width: 300px;
  height: 200px;
  border: 1px solid #f1f1f1;
  perspective: 1000px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* remove :hover here */
.flip-card.flipped .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  /* Safari */
  backface-visibility: hidden;
}

.flip-card-front {
  background-color: #bbb;
  color: black;
}

.flip-card-back {
  transform: rotateY(180deg);
}

#button {
  width: 300px;
  height: 300px;
  background-image: url(Frontpage.jpg);
}

#button2 {
  width: 300px;
  height: 300px;
  background-image: url(IMG1.jpg);
}

<div id="outerbackground">
  <img src="background.jpg" class="backgorund" border="1" id="BG">
</div>
<div id="container"></div>