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

為了進一步詳細說明我的評論：您可以使用一個類來控制卡片的翻轉狀態，而不是使用: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 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>