Как написать CSS в JS?

Question

Я хотел сделать игру на память. Я хочу написать CSS анимацию для переворота в JS, чтобы я мог затем вызвать функцию, потому что я хотел сделать анимацию onclick не анимацией при наведении курсора.

как сделать CSS анимацию с переворотом с помощью функции oncklicked в Javascript?

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 и удалить «.flip-card-front», используя свойство classlist и его методы

Использование:

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

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

Answer 2

Не пишите CSS в JS. Вместо этого просто измените правило :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>

Answer 3

Для дальнейшего уточнения моего комментария: вместо использования :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>